Merge pull request #133 from dear-lizhihua/2.0-cn

/vuex/state.md

Author: dingyiming

src/guide/state-management.md

@@ -6,7 +6,7 @@ order: 21
 
 ## 类 Flux 状态管理的官方实现
 
-由于多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 [vuex](https://github.com/vuejs/vuex)： 我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 [vue-devtools](https://github.com/vuejs/vue-devtools)，无需配置即可开始你的体验。
+由于多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 [vuex](https://github.com/vuejs/vuex)： 我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 [vue-devtools](https://github.com/vuejs/vue-devtools)，无需配置即可访问时光旅行。
 
 ### React 的开发者请参考以下信息
 
@@ -49,7 +49,7 @@ var store = {
 }
 ```
 
-需要注意，所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutations 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么。
+需要注意，所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么。
 
 此外，每个实例/组件仍然可以拥有和管理自己的私有状态：
 
@@ -71,7 +71,7 @@ var vmB = new Vue({
 
 ![状态管理](/images/state.png)
 
-<p class="tip">重要的是，注意你不应该在 action 中 替换原始的状态对象 - 组件和 store 需要引用同一个共享对象，mutations 才能够被观察</p>
+<p class="tip">重要的是，注意你不应该在 action 中 替换原始的状态对象 - 组件和 store 需要引用同一个共享对象，mutation 才能够被观察</p>
 
 接着我们继续延伸约定，组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，我们最终达成了 [Flux](https://facebook.github.io/flux/) 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation) 、保存状态快照、历史回滚/时光旅行的先进的调试工具。
 

src/vuex/state.md

@@ -6,18 +6,18 @@ order: 4
 
 # State
 
-### Single State Tree
+### 单一状态树
 
-Vuex uses a **single state tree** - that is, this single object contains all your application level state and serves as the "single source of truth". This also means usually you will have only one store for each application. A single state tree makes it straightforward to locate a specific piece of state, and allows us to easily take snapshots of the current app state for debugging purposes.
+Vuex 使用 **单一状态树** - 是的，用一个对象就包含了全部的应用层级状态，然后作为一个『唯一数据源(SSOT)』而存在。这也意味着，每一个应用将只有一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
 
-The single state tree does not conflict with modularity - in later chapters we will discuss how to split your state and mutations into sub modules.
+单状态树和模块化并不冲突 - 在后面的章节里我们会讨论如何将状态(state)和状态变更事件(mutation)分布到各个子模块中。
 
-### Getting Vuex State into Vue Components
+### 在 Vue 组件中获得 Vuex 状态
 
-So how do we display state inside the store in our Vue components? Since Vuex stores are reactive, the simplest way to "retrieve" state from it is simply returning some store state from within a [computed property](http://vuejs.org/guide/computed.html):
+那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法，就是在[计算属性](http://vuejs.org/guide/computed.html)的函数中直接返回某个 store 的状态：
 
 ``` js
-// let's create a Counter component
+// 创建一个计数器组件
 const Counter = {
   template: `<div>{{ count }}</div>`,
   computed: {
@@ -28,17 +28,16 @@ const Counter = {
 }
 ```
 
-Whenever `store.state.count` changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates.
+当 `store.state.count` 发生变化，将会引发重新对计算属性取值，并且相关联的 DOM 将触发更新。
 
-However, this pattern causes the component to rely on the global store singleton. When using a module system, it requires importing the store in every component that uses store state, and also requires mocking when testing the component.
+然而，这种模式导致组件依赖于全局状态单例。当使用模块系统时，还需要在每个组件都去引入 store，才能使每个组件都能使用 store 的状态，同时测试组件时也需要模拟出 store。
 
-Vuex provides a mechanism to "inject" the store into all child components from the root component with the `store` option (enabled by `Vue.use(Vuex)`):
+Vuex 提供一个机制，设置 `store` 选项（启用`Vue.use(Vuex)`）将 store 从根组件『注入』到每一个子组件中：
 
 ``` js
 const app = new Vue({
   el: '#app',
-  // provide the store using the "store" option.
-  // this will inject the store instance to all child components.
+  // 使用 "store" 选项后，可以注册 store 对象。将会把 store 实例注入到所有子组件。
   store,
   components: { Counter },
   template: `
@@ -49,7 +48,7 @@ const app = new Vue({
 })
 ```
 
-By providing the `store` option to the root instance, the store will be injected into all child components of the root and will be available on them as `this.$store`. Let's update our `Counter` implementation:
+通过在根实例中注册 `store` 选项，该 store 实例会被注入到根组件下的所有子组件中，并且子组件可以通过 `this.$store` 来访问。让我们一起调整刚才 `计数器` 的实现：
 
 ``` js
 const Counter = {
@@ -62,54 +61,54 @@ const Counter = {
 }
 ```
 
-### The `mapState` Helper
+### `mapState` 工具
 
-When a component needs to make use of multiple store state properties or getters, declaring all these computed properties can get repetitive and verbose. To deal with this we can make use of the `mapState` helper which generates computed getter functions for us and help us save some keystrokes:
+当一个组件需要引用了 store 的多个 state 属性或 getter 函数，声明列举出所有计算属性会变得重复且繁琐。对此，在我们需要生成 computed 所需的很多个 getter 函数时，使用 `mapState` 工具可以帮我们节省一些键盘按键(^_^)：
 
 ``` js
-// in standalone builds helpers are exposed as Vuex.mapState
+// vuex 提供了独立的构建工具函数 Vuex.mapState
 import { mapState } from 'vuex'
 
 export default {
   // ...
   computed: mapState({
-    // arrow functions can make the code very succinct!
+    // 箭头函数可以让代码非常简洁
     count: state => state.count,
 
-    // passing the string value 'count' is same as `state => state.count`
+    // 传入字符串 'count' 等同于 `state => state.count`
     countAlias: 'count',
 
-    // to access local state with `this`, a normal function must be used
+    // 想访问局部状态，就必须借助于一个普通函数，函数中使用 `this` 获取局部状态
     countPlusLocalState (state) {
       return state.count + this.localCount
     }
   })
 }
 ```
 
-We can also pass a string array to `mapState` when the name of mapped computed property is same as state sub tree name.
+当计算属性名称和状态子树名称对应相同时，我们可以向 `mapState` 工具函数传入一个字符串数组。
 
 ``` js
 computed: mapState([
-  // map this.count to store.state.count
+  // 映射 store.this.count 到 state.count
   'count'
 ])
 ```
 
-### Object Spread Operator
+### 对象扩展运算符
 
-Note that `mapState` returns an object. How do we use it in combination with other local computed properties? Normally, we'd have to use a utility to merge multiple objects into one so that we can pass the final object to `computed`. However with the [object spread operator](https://github.com/sebmarkbage/ecmascript-rest-spread) (which is a stage-3 ECMASCript proposal), we can greatly simplify the syntax:
+注意，`mapState` 返回一个对象。我们如何使用 mapState 合并其他局部的计算属性呢？通常地，为了将多个对象合并为一个对象，再传入这个合并好的最终对象到 `computed` 属性去，我们不得不使用一个工具函数来实现。然而有了[对象扩展运算符](https://github.com/sebmarkbage/ecmascript-rest-spread)（ECMAScript标准提案 stage-3），我们就能够让语法变得简洁起来：
 
 ``` js
 computed: {
   localComputed () { /* ... */ },
-  // mix this into the outer object with the object spread operator
+  // 使用对象扩展运算符，将 mapState 返回的对象和外层其他计算属性混合起来
   ...mapState({
     // ...
   })
 }
 ```
 
-### Components Can Still Have Local State
+### 组件仍然可以具有局部状态
 
-Using Vuex doesn't mean you should put **all** the state in Vuex. Although putting more state into Vuex makes your state mutations more explicit and debuggable, sometimes it could also make the code more verbose and indirect. If a piece of state strictly belongs to a single component, it could be just fine leaving it as local state. You should weigh the trade-offs and make decisions that fit the development needs of your app.
+使用 Vuex 并不意味你应该把 **所有** 状态都放在 Vuex 中去管理。尽管把更多的状态放到 Vuex 管理，会让状态变化变得更加清晰和可调试，但有时也能使代码变得冗余和不直观。如果某部分状态严格属于一个单独的组件，那就只把这部分状态作为局部状态就好了。你应该权衡利弊，做适应 App 的开发需求的决策。