Vuex核心概念---State

State

单一状态树

用一个对象包含了全部的应用及状态，至此它便作为一个 唯一的数据源 而存在，即每个应用仅仅包含一个store实例。

单一状态树能直接地定位任一特定的状态片段

  

在Vue组件中获得Vuex状态

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

//创建一个Counter组件
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对象提供给“store”选项，这可以把store的实例注入所有的子组件
    store,
    components:{ Counter },
    template:`
        <div class="app">
            <counter><counter>
        </div>
    `
})

 

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

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

mapState辅助函数

当一个组件要获取多个状态时，将这些状态声明为计算属性会有些重复和冗余

为了解决这个问题 ，可以使用mapState辅助函数生成计算属性

//在单独构建的版本中辅助函数为 Vuex.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'
})

对象展开运算符

mapState 函数返回的是一个对象，将局部计算属性混合

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

        })
    }
}

组件仍然保有局部状态

不是所有的状态都放入Vuex， 如果有些状态严格属于单个组件，最好还是作为组件的局部状态。