Skip to content

Commit 1ab2c81

Browse files
committed
[docs] object style dispatch
1 parent dd2499e commit 1ab2c81

File tree

2 files changed

+32
-0
lines changed

2 files changed

+32
-0
lines changed

docs/en/getting-started.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,15 @@ store.dispatch('INCREMENT')
3939
console.log(store.state.count) // -> 1
4040
```
4141

42+
If you prefer object-style dispatching, you can also do this:
43+
44+
``` js
45+
// same effect as above
46+
store.dispatch({
47+
type: 'INCREMENT'
48+
})
49+
```
50+
4251
Again, the reason we are dispatching 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.
4352

4453
Now this is just the simplest possible example of what a store is. But Vuex is more than just the store. Next, we will discuss some core concepts in depth: [State](state.md), [Mutations](mutations.md) and [Actions](actions.md).

docs/en/mutations.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,29 @@ store.dispatch('INCREMENT', 10)
4444

4545
Here `10` will be passed to the mutation handler as the second argument following `state`. Same for any additional arguments. These arguments are called the **payload** for the given mutation.
4646

47+
### Object-Style Dispatch
48+
49+
> requires >=0.6.2
50+
51+
You can also dispatch mutations using objects:
52+
53+
``` js
54+
store.dispatch({
55+
type: 'INCREMENT',
56+
payload: 10
57+
})
58+
```
59+
60+
Note when using the object-style, you should include all arguments as properties on the dispatched object. The entire object will be passed as the second argument to mutation handlers:
61+
62+
``` js
63+
mutations: {
64+
INCREMENT (state, mutation) {
65+
state.count += mutation.payload
66+
}
67+
}
68+
```
69+
4770
### Mutations Follow Vue's Reactivity Rules
4871

4972
Since a Vuex store's state is made reactive by Vue, when we mutate the state, Vue components observing the state will update automatically. This also means Vuex mutations are subject to the same reactivity caveats when working with plain Vue:

0 commit comments

Comments
 (0)