Skip to content

Improve documentation consistency for mutations.md and actions.md #794

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 24, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/en/actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,13 +107,13 @@ export default {
// ...
methods: {
...mapActions([
'increment', // map this.increment() to this.$store.dispatch('increment')
'increment', // map `this.increment()` to `this.$store.dispatch('increment')`

// mapActions also supports payloads:
'incrementBy' // this.incrementBy(amount) maps to this.$store.dispatch('incrementBy', amount)
// `mapActions` also supports payloads:
'incrementBy' // map `this.incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // map this.add() to this.$store.dispatch('increment')
add: 'increment' // map `this.add()` to `this.$store.dispatch('increment')`
})
}
}
Expand Down Expand Up @@ -162,14 +162,14 @@ actions: {
Finally, if we make use of [async / await](https://tc39.github.io/ecmascript-asyncawait/), a JavaScript feature landing very soon, we can compose our actions like this:

``` js
// assuming getData() and getOtherData() return Promises
// assuming `getData()` and `getOtherData()` return Promises

actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // wait for actionA to finish
await dispatch('actionA') // wait for `actionA` to finish
commit('gotOtherData', await getOtherData())
}
}
Expand Down
6 changes: 3 additions & 3 deletions docs/en/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const store = new Vuex.Store({
}
})

store.state.a // -> moduleA's state
store.state.b // -> moduleB's state
store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state
```

### Module Local State
Expand All @@ -38,7 +38,7 @@ const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// state is the local module state
// `state` is the local module state
state.count++
}
},
Expand Down
10 changes: 5 additions & 5 deletions docs/en/mutations.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const store = new Vuex.Store({
})
```

You cannot directly call a mutation handler. The options here is more like event registration: "When a mutation with type `increment` is triggered, call this handler." To invoke a mutation handler, you need to call **store.commit** with its type:
You cannot directly call a mutation handler. The options here is more like event registration: "When a mutation with type `increment` is triggered, call this handler." To invoke a mutation handler, you need to call `store.commit` with its type:

``` js
store.commit('increment')
Expand Down Expand Up @@ -146,13 +146,13 @@ export default {
// ...
methods: {
...mapMutations([
'increment', // map this.increment() to this.$store.commit('increment')
'increment', // map `this.increment()` to `this.$store.commit('increment')`

// mapMutations also supports payloads:
'incrementBy' // this.incrementBy(amount) maps to this.$store.commit('incrementBy', amount)
// `mapMutations` also supports payloads:
'incrementBy' // map `this.incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // map this.add() to this.$store.commit('increment')
add: 'increment' // map `this.add()` to `this.$store.commit('increment')`
})
}
}
Expand Down
14 changes: 7 additions & 7 deletions docs/en/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const myPlugin = store => {
// called when the store is initialized
store.subscribe((mutation, state) => {
// called after every mutation.
// The mutation comes in the format of { type, payload }.
// The mutation comes in the format of `{ type, payload }`.
})
}
```
Expand Down Expand Up @@ -62,15 +62,15 @@ const myPluginWithSnapshot = store => {
store.subscribe((mutation, state) => {
let nextState = _.cloneDeep(state)

// compare prevState and nextState...
// compare `prevState` and `nextState`...

// save state for next mutation
prevState = nextState
})
}
```

**Plugins that take state snapshots should be used only during development.** When using Webpack or Browserify, we can let our build tools handle that for us:
**Plugins that take state snapshots should be used only during development.** When using webpack or Browserify, we can let our build tools handle that for us:

``` js
const store = new Vuex.Store({
Expand All @@ -81,7 +81,7 @@ const store = new Vuex.Store({
})
```

The plugin will be used by default. For production, you will need [DefinePlugin](https://webpack.github.io/docs/list-of-plugins.html#defineplugin) for Webpack or [envify](https://github.com/hughsk/envify) for Browserify to convert the value of `process.env.NODE_ENV !== 'production'` to `false` for the final build.
The plugin will be used by default. For production, you will need [DefinePlugin](https://webpack.github.io/docs/list-of-plugins.html#defineplugin) for webpack or [envify](https://github.com/hughsk/envify) for Browserify to convert the value of `process.env.NODE_ENV !== 'production'` to `false` for the final build.

### Built-in Logger Plugin

Expand All @@ -103,8 +103,8 @@ The `createLogger` function takes a few options:
const logger = createLogger({
collapsed: false, // auto-expand logged mutations
filter (mutation, stateBefore, stateAfter) {
// returns true if a mutation should be logged
// `mutation` is a { type, payload }
// returns `true` if a mutation should be logged
// `mutation` is a `{ type, payload }`
return mutation.type !== "aBlacklistedMutation"
},
transformer (state) {
Expand All @@ -113,7 +113,7 @@ const logger = createLogger({
return state.subTree
},
mutationTransformer (mutation) {
// mutations are logged in the format of { type, payload }
// mutations are logged in the format of `{ type, payload }`
// we can format it any way we want.
return mutation.type
}
Expand Down