From 25c37705ed4b755da1388081c9f69b039b062650 Mon Sep 17 00:00:00 2001 From: ATLgo Date: Mon, 10 Oct 2016 16:48:17 +0800 Subject: [PATCH 1/4] translate getting-started.md --- src/vuex/getting-started.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/vuex/getting-started.md b/src/vuex/getting-started.md index c804baca9..67ecfa1e1 100644 --- a/src/vuex/getting-started.md +++ b/src/vuex/getting-started.md @@ -4,22 +4,22 @@ type: vuex order: 3 --- -# Getting Started +# 起步 -At the center of every Vuex application is the **store**. A "store" is basically a container that holds your application **state**. There are two things that makes a Vuex store different from a plain global object: +所有 Vuex 应用的中心就是 store（状态存储）。"store" 本质上是一个保存应用状态的容器。这里有两件要点，让 Vuex store 区别于普通全局对象： -1. Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes. +1. Vuex store 是响应式的。当 Vue 组件从 store 读取状态，如果 store 中的状态更新，它们也会高效地响应更新。 -2. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly **committing mutations**. This ensures every state change leaves a track-able record, and enables tooling that helps us better understand our applications. +2. 你不能直接更改 store 中的状态。更改状态的唯一的方法就是显式 **提交更改 (committing mutations)**。这样可以确保每次状态更改都留有可追踪的记录，并且可以使用工具帮助我们更好地理解我们的应用。 -### The Simplest Store +### 最简单的 Store -> **NOTE:** We will be using ES2015 syntax for code examples for the rest of the docs. If you haven't picked it up, [you should](https://babeljs.io/docs/learn-es2015/)! +> **NOTE:** 我们将会在以后的示例代码中使用 ES2015 语法。如果你还没有用过，[你应该看看](https://babeljs.io/docs/learn-es2015/)！ -After [installing](installation.md) Vuex, let's create a store. It is pretty straightforward - just provide an initial state object, and some mutations: +[安装](installation.md) Vuex 之后，我们来创建一个 store。这是一个非常易懂的例子 - 只含有一个初始化状态对象，以及一些更改： ``` js -// Make sure to call Vue.use(Vuex) first if using a module system +// 如果使用模块系统，确保之前调用过 Vue.use(Vuex) const store = new Vuex.Store({ state: { @@ -33,7 +33,7 @@ const store = new Vuex.Store({ }) ``` -Now, you can access the state object as `store.state`, and trigger a state change with the `store.commit` method: +现在，你可以通过 `store.state` 访问状态对象，以及通过 `store.commit` 触发状态的更改： ``` js store.commit('increment') @@ -41,10 +41,10 @@ store.commit('increment') console.log(store.state.count) // -> 1 ``` -Again, the reason we are committing a mutation instead of changing `store.state.count` directly, is because we want to explicitly track it. This simple convention makes your intention more explicit, so that you can reason about state changes in your app better when reading the code. In addition, this gives us the opportunity to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging. +再次说明，我们提交 mutation 而不是直接更改 `store.state.count`，是想要显式地追踪它。这个简单的转换使你的意图更加明显。当你阅读代码时，可以更好地了解应用中的状态更改。另外，这也让我们有机会去实现一些工具，记录修改日志、保存状态快照、甚至是进行基于时间轴的调试。 -Using store state in a component simply involves returning the state within a computed property, because the store state is reactive. Triggering changes simply means committing mutations in component methods. +因为 store 的状态是响应式的，要在组件中使用 store 的状态，只需在 computed 属性中返回 store 的状态就行。而触发状态改变可以简单的理解为在组件方法中提交 mutation。 -Here's an example of the [most basic Vuex counter app](https://jsfiddle.net/yyx990803/n9jmu5v7/). +这是一个 [最基本的 Vuex 计数应用](https://jsfiddle.net/yyx990803/n9jmu5v7/) 的例子。 -Next, we will discuss each core concept in much finer details and let's start with [State](state.md). +接下来，我们将在更多的细微细节中讨论每个核心思想，让我们从 [State](state.md) 开始吧。 From ed82952bd02164c58a1b7b20ea3554b0fac3c855 Mon Sep 17 00:00:00 2001 From: ATLgo Date: Mon, 10 Oct 2016 16:51:44 +0800 Subject: [PATCH 2/4] changing installation.md to installation.html --- src/vuex/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vuex/getting-started.md b/src/vuex/getting-started.md index 67ecfa1e1..622ec91fb 100644 --- a/src/vuex/getting-started.md +++ b/src/vuex/getting-started.md @@ -16,7 +16,7 @@ order: 3 > **NOTE:** 我们将会在以后的示例代码中使用 ES2015 语法。如果你还没有用过，[你应该看看](https://babeljs.io/docs/learn-es2015/)！ -[安装](installation.md) Vuex 之后，我们来创建一个 store。这是一个非常易懂的例子 - 只含有一个初始化状态对象，以及一些更改： +[安装](installation.html) Vuex 之后，我们来创建一个 store。这是一个非常易懂的例子 - 只含有一个初始化状态对象，以及一些更改： ``` js // 如果使用模块系统，确保之前调用过 Vue.use(Vuex) From 96b0f5ae25fe2845b7cdbd12ff085cd047015c9d Mon Sep 17 00:00:00 2001 From: ATLgo Date: Mon, 10 Oct 2016 16:54:55 +0800 Subject: [PATCH 3/4] changing state.md to state.html --- src/vuex/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vuex/getting-started.md b/src/vuex/getting-started.md index 622ec91fb..2a59d1ce4 100644 --- a/src/vuex/getting-started.md +++ b/src/vuex/getting-started.md @@ -47,4 +47,4 @@ console.log(store.state.count) // -> 1 这是一个 [最基本的 Vuex 计数应用](https://jsfiddle.net/yyx990803/n9jmu5v7/) 的例子。 -接下来，我们将在更多的细微细节中讨论每个核心思想，让我们从 [State](state.md) 开始吧。 +接下来，我们将在更多的细微细节中讨论每个核心思想，让我们从 [State](state.html) 开始吧。 From ffdc5a4b52fe59b365e593e1e5f967305e9bcf9b Mon Sep 17 00:00:00 2001 From: ATLgo Date: Mon, 10 Oct 2016 17:00:37 +0800 Subject: [PATCH 4/4] resolve comflict --- src/vuex/getting-started.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/vuex/getting-started.md b/src/vuex/getting-started.md index 2a59d1ce4..f8e5b618c 100644 --- a/src/vuex/getting-started.md +++ b/src/vuex/getting-started.md @@ -4,8 +4,6 @@ type: vuex order: 3 --- -# 起步 - 所有 Vuex 应用的中心就是 store（状态存储）。"store" 本质上是一个保存应用状态的容器。这里有两件要点，让 Vuex store 区别于普通全局对象： 1. Vuex store 是响应式的。当 Vue 组件从 store 读取状态，如果 store 中的状态更新，它们也会高效地响应更新。