vuex State

单一状态树

Vuex使用单一状态树，用一个对象就包含了全部的应用层级状态。至此他便作为一个“唯一数据源”而存在。这意味着，每个应用将仅仅包含一个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({
//把store对象提供给“store”选项，这可以把store的实例注入所有的子组件
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
}
}
}

mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性

//在单独构建的版本中辅助函数为Vuex.mapState
import {mapState} from 'vuex'
export default{
//...
computed:mapState({
//箭头函数可使代码更简练
count:state => state.count,
//传字符串参数‘count’等同于‘state=> state.count’
//为了能够使用‘this’获取局部状态，必须使用常规函数
countPlusLocalState(state){
return state.count+this.localCount
}
})
}

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

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

对象展开运算符

mapState函数返回的是一个对象。如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给computed属性。有了对象展开运算符，我们可以极大地简化写法：

computed:{
  localComputed(){/*...*/}，
···mapState({
//...
})

}

*对象展开实例

let {x,y,...z}={x:1,y:2,a:3,b:4};
x;//1
y;//2
z;//{a:3,b:4}

组件仍然保有局部状态

使用Vuex并不意味着你需要将所有的状态放入Vuex。虽然将所有的状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
本文源自Vuex官网

最后编辑于：2017.12.06 11:28:58