vuex状态树state与辅助函数mapState

State
单一状态树
Vuex 用一个对象就包含了全部的应用层级状态。
作为唯一数据源，每个应用将仅仅包含一个 store 实例。
单状态树、模块化、状态、状态变更事件分布
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

computed: {
    count: function () {
		return this.$store.state.count
	}
}
每当 this.$store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

state在vuex中的定位类似于data在vue中的定位：state(vuex) ≈ data (vue)
都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件。
也就是当你改变值的时候可以触发dom的更新.
state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.
当然使用data去接收$store.state也可以接收到值,但由于这只是一个简单的赋值操作,
因此state中的状态改变的时候不能被vue中的data监听到。

 

mapState 辅助函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。
mapState是state的语法糖,辅助函数帮助生成计算属性。

//  在使用mapState之前,要导入这个辅助函数.
import { mapState } from 'vuex'
export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
需要注意的是：箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
当映射的计算属性的名称与 state 的子节点名称相同时，可以给 mapState 传一个字符串数组。
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

对象展开运算符
mapState 函数返回的是一个对象。
将它与局部计算属性混合使用，使用一个工具函数将多个对象合并为一个，将最终对象传给 computed 属性。
对象展开运算符可以极大地简化写法：
count.js 
countList: {
    one: [ 1, 2, 3 ],
    two: {a: '4', b: 5},
    three: 6
}
computed: {
	...mapState({
      countList: (state) => {return state.count.countList}
    })
},

组件仍然保有局部状态
使用 Vuex 并不意味着需要将所有的状态放入 Vuex。
将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。
如果有些状态严格属于单个组件，最好还是作为组件的局部状态。
应该根据应用开发需要进行权衡和确定。
...展开运算符将mapState中的对象的key和value展开混入到另一个对象里面