vuex的modules模块

最近在网上看到有人说到vue中的模块越来越多时，怎么管理vuex，我想到了在vuex官网看到的modules，但一直没有实践去用过。这次就专门抽出一些时间去看了看这个vuex的第五个核心概念。

vuex 文件结构

├── vuex                    
|   ├── modules         
|   |   ├── test.js      test模块
|   |   └── book.js      book模块
|   ├── index.js         主模块
|   ├── getters.js       主模块getter
|   ├── actions.js       主模块actions
|   ├── mutations.js     主模块mutations

vuex 的主文件 index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

import * as actions from './actions'
import * as getters from './getters'
import {mutations,state} from './mutations'

import test from './modules/test';
import book from './modules/book';

// 如果不加上namespaced:true ，vuex会把所有模块的值映射到根store，这样可能会造成命名冲突
export default new Vuex.Store({
    modules: {
        book:{...book,namespaced: true},
        test:{...test,namespaced: true},
        index:{
            state,
            getters,
            mutations,
            actions
        }
    }
})

modules/test 和 modules/book 文件内容大致相同,

只是 state.count 初始值为5，setCount 的修改为state.count = state.count + 4;

// initial state
const state = {
  count: 3
}

// getters
const getters = {
  count: state => state.count
}

// actions
const actions = {
  getCount ({ commit }) {
    commit('setCount')
  }
}

// mutations
const mutations = {
    setCount (state){
        state.count = state.count + 1;
    }
}

export default {
  state,
  getters,
  actions,
  mutations
}

最后是页面怎么去区分引用不同模块的相同属性(只贴出关键代码)

computed: {
    ...mapGetters(['isLogin','userInfo']),
    ...mapGetters('book',{
      count:'count'
    }),
    ...mapGetters('test',{
      count2:'count'
    })
},
created(){
    console.log('book',this.count)  // 5
    console.log('test',this.count2)  // 3

    // 调用book模块的getCount方法
    this.getCount();
    console.log('book',this.count)  // 9
    
    // 调用test模块的getCount方法
    this.$store.dispatch('test/getCount');
    console.log('test',this.count2)  // 4
},
methods:{
    ...mapActions('book', [
      'getCount'
    ])
}