目标：

掌握模块中 state 的访问语法

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名

---

使用模块中的数据

1. 直接通过模块名访问 $store.state.模块名.xxx

2. 通过 mapState 映射：

   1. 默认根级别的映射 mapState([ ‘xxx’ ])

   2. 子模块的映射 ：mapState(‘模块名’, [‘xxx’]) - 需要开启命名空间 namespaced:true

      注意namespaced后面有d！！！

      配好之后，模块名后面可以看见namespace的标志

      

      但是它可能有缓存，可以ctrl+F5强制刷新一下

modules/user.js

const state = {userInfo: {name: 'zs',age: 18},myMsg: '我的数据'
}const mutations = {updateMsg (state, msg) {state.myMsg = msg}
}const actions = {}const getters = {}export default {namespaced: true,state,mutations,actions,getters
}

---

代码示例

$store直接访问

$store.state.user.userInfo.name

mapState辅助函数访问

...mapState(['count', 'title']),
// 写多个是完全没关系的，只要是不重名，互相之间是不冲突的，只是在加多个计算属性而已
...mapState('user', ['userInfo']),
...mapState('setting', ['theme', 'desc']),

访问

<!-- 访问模块中的state -->
<div>{{ user.userInfo.name }}</div>
<div>{{ setting.theme }}</div>