【Vue】获取模块内的state数据

目标：

掌握模块中 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>