2、state

介绍

本文是学习vuex时做的笔记，所有笔记内容请看 vuex学习笔记

单一状态树

Vuex使用单一状态树，用一个对象就包含了全部的应用层级状态。它便作为”唯一数据源“ 而存在。这也意味着，每个应用将仅仅包好一个store实例。单一状态树让我们能够直接定位任意特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

可以根据下述例子理解一下单一状态树：

如上图是一个公司的组织架构，它的这种层级其实就属于一种树形的结构，总经理就是树的主干，其他各部门或者职业，都属于树的分支。
一般情况下，一个公司只会有这么一个树形架构，如果有两个平等的总经理，那么公司在管理上很可能就会出现矛盾，下面的人到底听谁的呢，是吧！

好，现在咱们再来看下官方所叙述的「单一状态树」：

1、用一个对象（主干）就包含了全部的（分支）应用层级状态。
2、每个应用（公司）将仅仅包含一个 store 实例对象（主干）。

单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

在Vue组件中获取Vuex状态

由于vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态：

const Counter = {
    template:`<div>{{ count }}</div>`,
    computed:{
        count(){
            return store.state.count
        }
    }
}

当store.state.count 变化时，都会重新求取计算属性，并且触发更新相关联的DOM

然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用state的组件中需要频繁的导入，并且在测试组件时需要模拟状态
Vuex通过store选项，提供了一种机制将状态从跟组件”注入“到每一子组件中(需要调用Vue.use(Vuex)）：

const app = new Vue({
    el:"#app",
    store,
    components:{ Counter },
    template:`
       <div class = "app">
           <counter></counter>
       </div>
    `
})

通过在根实例中注册 store 选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到
如下counter实现：

const Counter = {
    template:`<div>{{ count }}</div>`
    computed:{
        count(){
            return this.$store.state.count
        }
    }
}

接下来不理解的，可以看一下：ES6 对象解构、数组解构
当一个组件需要获取多个状态的时候，将这些状态声明为计算属性会有些重复，可以使用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
        }
    })
}

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

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

mapState 函数返回的一个对象，可以使用对象扩展运算符进行扩展，与局部计算属性进行混合。

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