Просмотр исходного кода

docs: add an example to getting started

Evan You 8 лет назад
Родитель
Сommit
661f6c0f5f
2 измененных файлов с 8 добавлено и 3 удалено
  1. 7 3
      docs/en/getting-started.md
  2. 1 0
      docs/en/modules.md

+ 7 - 3
docs/en/getting-started.md

@@ -20,7 +20,7 @@ const store = new Vuex.Store({
     count: 0
     count: 0
   },
   },
   mutations: {
   mutations: {
-    INCREMENT (state) {
+    increment (state) {
       state.count++
       state.count++
     }
     }
   }
   }
@@ -30,11 +30,15 @@ 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:
 Now, you can access the state object as `store.state`, and trigger a state change with the `store.commit` method:
 
 
 ``` js
 ``` js
-store.commit('INCREMENT')
+store.commit('increment')
 
 
 console.log(store.state.count) // -> 1
 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.
 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.
 
 
-Next, let's see [how to use the State inside Vue components](state.md).
+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.
+
+Here's an example of the [most basic Vuex counter app](https://jsfiddle.net/yyx990803/n9jmu5v7/).
+
+Next, we will discuss each core concept in much finer details and let's start with [State](state.md).

+ 1 - 0
docs/en/modules.md

@@ -0,0 +1 @@
+# Modules