1，什么时候用modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
在模块中使用:namespaced: true, 命名空间，添加之后，当前模块下的标识符可以和其它模块相同,用于解决不同模块的命名冲突问题

2，store文件结构

3.1 index.js中手动引入modules

import Vue from 'vue'
import Vuex from 'vuex'import bus from './modules/bus'
import app from './modules/app'const path = require('path')Vue.use(Vuex)let store = new Vuex.Store({state: {},mutations: {},actions: {},modules: {namespaced: true,app,bus}
});export default store

3.2 index.js 中动态引入modules

import Vue from 'vue'
import Vuex from 'vuex'
const path = require('path')Vue.use(Vuex)const files = require.context('./modules', false, /\.js$/)
let modules = {}
files.keys().forEach(key => {let name = path.basename(key, '.js')modules[name] = files(key).default || files(key)
})let store = new Vuex.Store({state: {},mutations: {},actions: {},modules
});export default store

4，app.js 文件中代码

let user = {namespaced: true,state: {user: {}},mutations: {setUser(state, val) {state.user = val;}},getters: {},actions: {}
}export default user;

 5，配置main.js，挂载store

new Vue({el: '#app',router,store,components: { App: App },template: ''
})

6，vue中使用

  mounted () {this.$store.commit('app/setUser', {name: '张三'});console.log(this.$store.state.app.user.name);}

7，js中使用

// 引入 这里的store 就相当于页面中的 this.$store
import store from '@/store'export const setCurUser = (user) => {let curUser = store.app.userif(!curUser) {store.commit("app/setUser", user)return user}return curUser
}

注意：

1，vue和vuex的版本搭配

vue2使用vuex3；vue3使用vuex4. 否则会出现this.$store为undefined错误