Skip to content

Commit

Permalink
[docs] object style dispatch
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Mar 9, 2016
1 parent dd2499e commit 1ab2c81
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 0 deletions.
9 changes: 9 additions & 0 deletions docs/en/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,15 @@ store.dispatch('INCREMENT')
console.log(store.state.count) // -> 1
```

If you prefer object-style dispatching, you can also do this:

``` js
// same effect as above
store.dispatch({
type: 'INCREMENT'
})
```

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.

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).
23 changes: 23 additions & 0 deletions docs/en/mutations.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,29 @@ store.dispatch('INCREMENT', 10)

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.

### Object-Style Dispatch

> requires >=0.6.2
You can also dispatch mutations using objects:

``` js
store.dispatch({
type: 'INCREMENT',
payload: 10
})
```

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:

``` js
mutations: {
INCREMENT (state, mutation) {
state.count += mutation.payload
}
}
```

### Mutations Follow Vue's Reactivity Rules

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:
Expand Down

0 comments on commit 1ab2c81

Please sign in to comment.