Bladeren bron

[docs] object style dispatch

Evan You 9 jaren geleden
bovenliggende
commit
1ab2c81575
2 gewijzigde bestanden met toevoegingen van 32 en 0 verwijderingen
  1. 9 0
      docs/en/getting-started.md
  2. 23 0
      docs/en/mutations.md

+ 9 - 0
docs/en/getting-started.md

@@ -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 - 0
docs/en/mutations.md

@@ -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: