vuex的简单使用

2024-02-08 11:53:58

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么情况下应该使用Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果应用够简单，最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够满足了。但是，如果需要构建一个中大型单页应用，我们很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

一、安装并引入vuex

npm install vuex --save

在main.js中引入：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

二、构建核心仓库store.js

Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。
在src目录下创建store文件夹，在其中创建store.js文件：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  namespaced: true,
  state: {
    testContent: '这是一个vuex全局测试',
  },
  mutations: {
    // 重置vuex本地储存状态
    resetStore (state) {
      Object.keys(state).forEach((key) => {
        state[key] = cloneDeep(window.SITE_CONFIG['storeState'][key])
      })
    }
  }
})

这里存放一个状态testContent。
虽然在 main.js 中已经引入了 Vue 和 Vuex，但是这里还得再引入一次。

三、将状态映射到组件

<template>
  <div class="service">
    <div class="conta">
      <span class="impt-remarks">
       	{{testContent}}
      </span>
    </div>
  </div>
</template>
<script>
  export default{
    name:'service-bar',
    computed: {
      testContent(){
      	return this.$store.state.testContent
      }
    }
  }
</script>

testContent的值会在相应的地方回显。

四、在组件中修改状态

<template>
  <div class="service">
    <div class="conta">
      <span class="impt-remarks" @click="changeBtn()">
       	{{testContent}}
      </span>
    </div>
  </div>
</template>
<script>
  export default{
    name:'service-bar',
    data(){
      return{
      	testStyle: "111111",
      }
    },
    computed: {
      testContent(){
      	return this.$store.state.testContent
      }
    }
    methods: {
      changeBtn() {
        this.$store.state.testContent = "改变后的内容是这样的"
      }
    }
  }
</script>

五、使用vue官方推荐的修改方式

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

store.js中可以这样写：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  namespaced: true,
  state: {
    testContent: '这是一个vuex全局测试',
  },
  mutations: {
    newTest(state, msg) {
      state.testContent = msg
    }
  }
})

首先在 store.js 中定义一个方法 newTest，其中第一个参数 state 就是 $store.state，第二个参数 msg 需要另外传入;
然后修改点击事件changeBtn()

changeBtn(){
  this.$store.commit('newTest', this.testStyle)
}

使用 $store.commit 提交 newTest，并将 this.testStyle传给 msg，从而修改 testContest.

码农公寓