文档结构

module 给了我们一种隔离vuex store 各个 state及相关api 的方法，让数据相关操作在复杂的项目场景可以更清晰，易追踪。

│
├── index.js
│
├── controla
│   └── index.js
│
└── controlb
    └── index.js
 
     

index.js

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

Vue.use(Vuex)
import controla from './controla'
import controlb from './controlb'

export default new Vuex.Store({
  modules: {
    controla,
    controlb
  }
})

controla/b

const controla = {
    // 当namespaced=true 时， vuex, 将会自动给各自module 添加访问路径名。 方便区分moduel
    namespaced: true,
    state: {
        name: 'controla',
        type: 'controla A'
    },
    mutations: {
        updateNameByMutation(state, appendStr) {
            state.name = state.name + " append Str: " + appendStr
        }
    },
    actions: {
        // 如果不使用命名空间， 那么view 指向actions 的该方法时，会执行所有与指定action名相同的函数（即：这里module A,B 中该action都会执行）
        udpateNameByAction({
            commit
        }, appendStr) {
            commit("updateNameByMutation", appendStr)
        }
    },
    getters: {
        getNameB(state) {
            return state.name
        }
    }
}

export default controla

使用

• 第一个参数传的是 module 路径(就引入各个module的名称)名。 这种方式将只会在当前view中，导出指定模块下注册的 action 集合。

<template>
    <div>
      <h3>{{name }} </h3>
      <h3>{{nameb }} </h3>
      <button @click="changeCA">changeCA</button>
   </div>
</template>

<script>
// @ is an alias to /src
import {mapState,mapMutations} from 'vuex'
 export default {
  name: "Home",
  components: {
  },
  data() {
    return { };
  },
  computed:{
    ...mapState('controla',{name:state=>state.name})
 ,  ...mapState('controlb',{nameb:state=>state.name})
  },
  methods: {
    ...mapMutations('controla',['updateNameByMutation']),

    changeCA(){
      this.updateNameByMutation('hello World')
    }
  },
};
</script>
 <style scoped>
</style>