vuex/docs/zh-cn/state.md

State

单状态树

Vuex 使用 单状态树（single state tree） —— 也就是单个对象包含整个应用的 state。这使得我们在 debugging 的过程中能直接定位相关的 state，快速地取得当前应用的 state 快照（snapshots）。

单状态树和模块化不冲突——在往后的章节里我们会讨论如何将状态管理分离到各个子模块中。

在 Vue 组件中获得 Vuex State

和 Vue 实例中的 data 对像一样，state 对象一旦进入 Vuex 实例，就会变成响应的（powered by Vue.js 响应系统）。也就是说，要将 Vuex state 和 Vue 组件联系在一起，只需要简单地将前者返回给后者的 computed 属性。

// 一个 Vue 组件模块内部

// 引入一个 vuex 实例
import vuex from './vuex'

export default {
  computed: {
    message () {
      return vuex.state.message
    }
  }
}

不需要建立任何监听器或者建立组件和 store 之间的联系，你唯一要记住的是，在 computed 属性里，必须通过 vuex.state.xxx 引用 state。不能在 computed 属性外部存放 state 的引用。

Flux reference: this can be roughly compared to mapStateToProps in Redux and getters in NuclearJS.

你会问为什么我们不直接用 data 去绑定 vuex state，我们看以下例子：

export default {
  data () {
    return {
      message: vuex.state.message
    }
  }
}

因为 data 函数不追踪任何 reactive dependencies, 仅仅是一个对 vuex.state.message 的静态引用。即使之后 Vuex state 被改变，组件也无法知道它的改变。而 computed 属性不同，它在 state 改变的时候会跟踪所有 reactive dependencies。

组件不允许直接改变 state

使用只读的 computed 属性有一个好处就是，能更好的遵守 组件永远不能直接改变 Vuex state 的准则。由于我们希望每一个 state 都意图清晰且可被跟踪，所有的 vuex state mutations 都必须在 vuex mutation handlers 当中。

为了践行这条准则，当你在 Debug 模式 中在 mutation handlers 外部改变 Vuex state 时，Vuex 会抛出错误。

根据这条准则，我们的 Vue 组件处理的事情就很少了：只需要通过只读的 computed 属性和 Vuex state 建立联系，改变 state 的唯一方法是调用 actions. 它们照样能在必要时对 state 进行操作，但我们再也不需要在组件里做任何数据获取和 state 相关的逻辑了。