目标

掌握核心概念 module 模块的创建

问题

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护

由此，又有了Vuex的模块化

---

模块定义 - 准备 state

新建store/modules文件夹

定义两个模块 user 和 setting

user中管理用户的信息状态 userInfo modules/user.js

const state = {userInfo: {name: 'zs',age: 18}
}const mutations = {}const actions = {}const getters = {}export default {state,mutations,actions,getters
}

setting中管理项目应用的 主题色 theme，描述 desc， modules/setting.js

const state = {theme: 'dark', // 主题色desc: '描述真呀真不错'
}const mutations = {}const actions = {}const getters = {}export default {state,mutations,actions,getters
}

在store/index.js文件中的modules配置项中，注册这两个模块

import user from './modules/user'
import setting from './modules/setting'const store = new Vuex.Store({modules:{// user: user 同名可简写user,setting}
})

检验是否配置成功：通过vue的调试工具

使用模块中的数据, 可以直接通过模块名访问 $store.state.模块名.xxx => $store.state.setting.desc

也可以通过 mapState 映射