8000 docs: add an example to getting started · vuejs-ar/ar.vuejs.org@661f6c0 · GitHub
[go: up one dir, main page]

Skip to content

Commit 661f6c0

Browse files
committed
docs: add an example to getting started
1 parent f2938cb commit 661f6c0

File tree

2 files changed

+8
-3
lines changed

2 files changed

+8
-3
lines changed

docs/en/getting-started.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const store = new Vuex.Store({
2020
count: 0
2121
},
2222
mutations: {
23-
INCREMENT (state) {
23+
increment (state) {
2424
state.count++
2525
}
2626
}
@@ -30,11 +30,15 @@ const store = new Vuex.Store({
3030
Now, you can access the state object as `store.state`, and trigger a state change with the `store.commit` method:
3131

3232
``` js
33-
store.commit('INCREMENT')
33+
store.commit('increment')
3434

3535
console.log(store.state.count) // -> 1
3636
```
3737

3838
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.
3939

40-
Next, let's see [how to use the State inside Vue components](state.md).
40+
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.
41+
42+
Here's an example of the [most basic Vuex counter app](https://jsfiddle.net/yyx990803/n9jmu5v7/).
43+
44+
Next, we will discuss each core concept in much finer details and let's start with [State](state.md).

docs/en/modules.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Modules

0 commit comments

Comments
 (0)
0