加入快速开始文档

加入快速开始文档
基于英文文档 v0.6.2

Author: hq5544

docs/zh-cn/quickstart.md

@@ -1,2 +1,53 @@
-# Quickstart
+# 快速开始
 
+每一个基于 Vuex 的应用的核心就是 **store**. "store" 基本上就是一个装有你的应用的大部分 **状态**(即 **state**)的容器. Vuex 和普通的全局对象有以下两点不同：
+
+1. Vuex 的状态存储是动态的. 当 Vue 组件从 store 中的 state 读取状态的时候, 如果 store 中的 state 改变，那么响应的组件也会动态并高效的改变.
+
+2. 你不能直接改变 store 中的 state. 改变 store 中的 state 的唯一途径就是明确的 dispatch **mutations** 事件. 这样使得每一个状态的变化冻很容易追踪, 并且能够让我们通过工具更了解应用内部的状态.
+
+### 最简单的 store
+
+> **注意:** 在接下来的文档中，我们将会在后面的例子中使用 ES2015 的语法。如果你还没能掌握 ES2015，[你应该这样](https://babeljs.io/docs/learn-es2015/)! 文档同样也认为你已经熟悉了 [Building Large-Scale Apps with Vue.js](http://vuejs.org/guide/application.html) 中所涉及的概念.
+
+创建 Vuex 的 store 相当直截了当 - 只要提供一个初始化的 state 对象，以及一些 mutations：
+
+``` js
+import Vuex from 'vuex'
+
+const state = {
+  count: 0
+}
+
+const mutations = {
+  INCREMENT (state) {
+    state.count++
+  }
+}
+
+const store = new Vuex.Store({
+  state,
+  mutations
+})
+```
+
+现在，你可以通过 `store.state` 来读取状态对象，还可以通过 dispatch mutation 的名字来触发改变：
+
+``` js
+store.dispatch('INCREMENT')
+
+console.log(store.state.count) // -> 1
+```
+
+如果你更喜欢对象风格的 dispatch，你也可以这么做：
+
+``` js
+// 同上例效果
+store.dispatch({
+  type: 'INCREMENT'
+})
+```
+
+再次强调，我们通过 dispatch 一个 mutation 而不是直接改变 `store.state.count`，是因为我们想要明确追踪状态的变化。这个简单的约定，能够让你不会状态混乱，这让应用状态改变的时候，在代码中能够更好的定位。此外，这样也给了我们机会通过工具来记录每次状态改变、状态快照、甚至像时间旅行一样调试。
+
+这里只是一个最简单的理解展示 store 的状态存储。但是 Vuex 不仅仅是状态存储。接下来，我们将会深入探讨一些核心概念：[State](state.md), [Mutations](mutations.md) 和 [Actions](actions.md).