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 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。