Vuex的用法 - Githubissues

Vuex的用途：专门用于状态管理。因为在Vue中，状态即数据，状态管理实际上也就是数据管理。由于vue组件间数据传递较为困难且兄弟组件没有专门传递数据的方法，并且复杂应用中组件间传值变得更为复杂。此时可以使用vuex在多个组件间进行通信。

Vuex

1.state

state是专门用于存放数据的对象。把需要在不同组件间传递的数据放在state里。在组件中，使用this.$store.state.数据来获取数据。

2.getters

getters和vue中的computed类似，用于监听state里数据的变化。方便用state里存储的数据生成一些可以直接使用的数据。且只有state里的依赖值发生改变后getters里方法的返回值才会发送变化。在组件中，使用this.$store.getters.处理方法来获取处理后的数据

3.mutations

getters只是可以利用state里存储的数据生成一些经过处理的数据，但不会影响到state存储数据的本身。而mutations是唯一可以修改state所存储数据的对象。在mutations里定义方法，用来修改state里的数据。在组件中。使用this.$store.commit(方法名，参数)使用mutations里的方法

4.actions

类似于mutations，但是不同之处是：

action 提交的是 mutation，而不是直接变更状态。
action 可以包含任意异步操作。
action中的回调函数中第一个参数是context，这是一个与store实例具有相同属性和方法的对象

官方不建议直接使用mutations来直接改变state里的数据，而是先提交actions，在actions里提交mutations来修改状态。在组件中，使用this.$store.dispatch()使用actions里的方法 示例：

mutations:{
  add(state){
    // 修改state里的count
    state.count =  state.count + 1;
  }
}

actions:{
  addFun(context){
    // 提交mutations里的add方法
    context.commit("add")
  }
}
// 在组件中的调用：
this.$store.dispatch("addFun")

5.辅助函数

包括mapState、mapGetters、mapActions 有时在组件中需要多次调用this.$stroe.state.数据，this.$store.dispatch（）,这时可以现在组件中导入辅助函数 import {mapState，mapGetters，mapActions} from "vuex"

6.module

Vuex 允许我们将 store 分割成大大小小的对象，每个对象也都拥有自己的 state、getter、mutation、action，这个对象我们把它叫做 module（模块），在模块中还可以继续嵌套子模块、子子模块 …… 比如说某个module专门用于管理用户登录数据，而另一个module用来管理各组件间通信以实现某个业务逻辑。

用法示例：在modules文件夹下新建两个文件：moduleA.js 和 moduleB.js

// moduleA的示例
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

然后在store.js中，导入moduleA和B

import moduleA from './module/moduleA';
import moduleB from './module/moduleB';

export default new Vuex.Store({
    modules: {
        moduleA, moduleB,
    },
    // ...
}

在组件中就可以使用this.$store.state.moduleA.text来访问moduleA里state的数据text。（即需要通过模块名访问不同模块里的数据） 注意问题：模块内部的 action、mutation 和 getter 默认可是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。 解决方法：通过添加 namespaced: true 的方式使其成为带命名空间的模块。比如在 moduleA.js 中添加 namespaced: true。

如何在模块中访问 store 根节点的数据 state：可以在模块内部的 getter 和 action 中，通过 rootState 这个参数来获取。以下是moduleA文件示例：

export default {
    getters: {
        // 注意:rootState必须是第三个参数
        detail(state, getters, rootState) {
            return state.text + '-' + rootState.name;
        }
    },
    actions: {
        callAction({state, rootState}) {
            alert(state.text + '-' + rootState.name);
        }
    }
}

LastPoem / Notes

Vuex的用法 #32