目标
掌握核心概念 module 模块的创建
问题
由于使用单一状态树 ,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
这句话的意思是,如果把所有的状态都放在state中,当项目变得越来越大的时候,Vuex会变得越来越难以维护
由此,又有了Vuex的模块化
模块定义 - 准备 state
新建store/modules文件夹
定义两个模块 user 和 setting
user中管理用户的信息状态 userInfo modules/user.js
jsx
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
jsx
const state = {
theme: 'dark', // 主题色
desc: '描述真呀真不错'
}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}
在store/index.js
文件中的modules配置项中,注册这两个模块
js
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 映射