Vue教程24：Vuex Modules（完结）

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。

该节教程代码可通过npm start运行devServer，在http://localhost:8080/#/index查看效果

运行服务端请cd server，node server.js。

创建Vuex模块

我们可以新建两个Vuex模块，名为src/store/mod_a.js和src/store/mod_b.js。
每个Vuex模块都可以看做一个独立的store对象，里面可以有属于它自己的State、Actions、Mutations等等。

代码示例：/lesson24/src/store/mod_a.js

新建模块代码如下：

export default {
  state: {
    str: 'store_a'
  },
  mutations: {
    'mod_a.setStr': function (state, s){
      alert('a的setStr');
      state.str=s;
    }
  },
  actions: {
    'mod_a.setStr': function ({commit}, s){
      commit('mod_a.setStr', s);
    }
  }
}

在实例化Store对象时，可以引入模块。

import ModA from './mod_a'
import ModB from './mod_b'

同时将模块配置到Store中：

export default new Vuex.Store({
  modules: {
    mod_a: ModA,
    mod_b: ModB
  }
})

读取模块数据

代码示例：/lesson24/src/components/Index.vue

在组件中，就可以通过$store.state.mod_a.str读取到模块内的state。

a_str: {{$store.state.mod_a.str}}

b_str: {{$store.state.mod_b.str}}

当然更推荐的是使用mapState的方式读取，但是和直接读取Store下的值（…mapState([‘a’, ‘b’])）不同，读取模块中的State需要通过方法获取：

computed: {
  ...mapState({
    str_a: state=>state.mod_a.str,
    str_b: state=>state.mod_b.str,
  }),
}

这样就可以在template中通过str_a和str_b获取到模块的state。

a_str: {{str_a}}

b_str: {{str_b}}

触发一个Action

假设每个模块中都有一个名为setStr的Action，我们在运行this.$store.dispatch(‘setStr’, ‘test’)时，所有模块中的同名Action都会被执行。

Mutation也具有同样的特点。但这不是Vuex的Bug，它的用意是让使用者能够通过一个Action同时更新多个模块的数据。

若需要回避这个问题，则可以给每个模块中的Action单独命名，通常我们会加上模块名作为前缀：

代码示例：/lesson24/src/store/mod_a.js

export default {
  state: {
    str: 'store_a'
  },
  mutations: {
    'mod_a.setStr': function (state, s){
      alert('a的setStr');
      state.str=s;
    }
  },
  actions: {
    'mod_a.setStr': function ({commit}, s){
      commit('mod_a.setStr', s);
    }
  }
}

在使用时，只需要分别mapActions：

代码示例：/lesson24/src/components/Index.vue

此时有两种方法可以mapActions：

1. …mapActions([‘mod_a.setStr’, ‘mod_b.setStr’])。
   此时需要通过methods运行\this[‘mod_a.setStr’](str)来触发Action。此时需要通过methods运行\this[‘mod_a.setStr’](str)来触发Action。
   但在template中直接调用，如会报错。
2. …mapActions({ set_a: ‘mod_a.setStr’, set_b: ‘mod_b.setStr’ })。
   这种方法的好处是，由于已经替换了方法名，在template中可以直接调用，如

完整示例代码如下：