vue学习之vuex的模块命名空间

在使用vuex时，如果使用module后，应该如何区分每个模块呢，需要使用命名空间

使用步骤

1. 在每个vuex模块中添加如下：

namespaced: true

如category模块：

export default {
  namespaced:true,
  state:{
    msg: '我是category仓库中的数据',
    num: 0
  },
  getters:{
    msg:state=>state.msg,
    num:state=>state.num
  },
  mutations:{
    ['ADD_FUN'](state){
      return state.num++;
    }
  },
  actions:{
  }
};

article模块

export default {
  namespaced:true,
  state:{
    msg:'我是article中的msg'
  },
  getters:{
    msg:state=>state.msg
  },
  mutations:{},
  actions:{}
};

在store/index.js中注册模块

import Vue from 'vue'
import Vuex from 'vuex'
import articleStore from './articleStore'
import categoryStore from './categoryStore'

Vue.use(Vuex)

export default new Vuex.Store({
  modules:{
    // 放每个模块对应的小store
    articleStore,
    categoryStore
  }
});

2. 如何使用命名空间

//category.vue
<template>
  <div class="category">
    category
    {{msg}}
    -------
    <button @click="ADD_FUN">+1</button>
    {{num}}
  </div>
</template>

<script>
import { mapGetters,mapMutations } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters('categoryStore',['msg','num']),
  },
  methods: {
    ...mapMutations('categoryStore',['ADD_FUN'])
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

---

• 总结：vuex模块命名空间的使用，主要加入namespaced:true到各个模块中。使用时，通过...mapGetters('模块名',['msg'])来使用即可。

vuex模块命名空间