vuex学习三

state

1：单一状态树：Vuex 使用 单一状态树 —— 是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。
2：在 Vue 组件中获得 Vuex 状态
（1）从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
然而，这种模式导致组件依赖的全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。
（2）Vuex 通过 store 选项，提供了一种机制将状态从根组件『注入』到每一个子组件中（需调用 Vue.use(Vuex)）

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通过在根实例中注册store选项，该store实例会注入到根组件下的所有组件中，并且子组件能通过this.$store访问到。
3：mapState辅助函数
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性有些重复冗余；为了解决这个问题，可以使用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
    }
    })
}

当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组

computed:mapState([
//映射this.count 为store.state.count
    'count'
])

4：使用对象展开运算符，与局部计算属性混合使用

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符...将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

五：使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。