8000 docs · vuejs/v2.vuejs.org@f97d106 · GitHub
[go: up one dir, main page]
Skip to content

Commit f97d106

Browse files
yyx990803yyx990803
committed
docs
1 parent baf0b21 commit f97d106

File tree

9 files changed

+127
-112
lines changed

9 files changed

+127
-112
lines changed

‎build/build.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ rollup.rollup({
3939
})
4040
.then(function () {
4141
return rollup.rollup({
42-
entry: 'src/middlewares/logger.js',
42+
entry: 'src/plugins/logger.js',
4343
plugins: [babel()]
4444
}).then(function (bundle) {
4545
return write('logger.js', bundle.generate({

‎docs/LANGS.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
* [English](en/)
2-
* [简体中文](zh-cn/)
3-
* [Português](pt/)
4-
* [Italiano](it/)
5-
* [Español](es/)
6-
* [日本語 (outdated)](ja/)
1+
* [English (1.0)](en/)
2+
* [简体中文 (0.8, outdated)](zh-cn/)
3+
* [Português (0.8, outdated)](pt/)
4+
* [Italiano (0.8, outdated)](it/)
5+
* [Español (0.8, outdated)](es/)
6+
* [日本語 (0.8, outdated)](ja/)

‎docs/en/SUMMARY.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
- [Actions](actions.md)
1212
- [Data Flow](data-flow.md)
1313
- [Application Structure](structure.md)
14-
- [Middlewares](middlewares.md)
14+
- [Plugins](middlewares.md)
1515
- [Strict Mode](strict.md)
1616
- [Form Handling](forms.md)
1717
- [Testing](testing.md)

‎docs/en/api.md

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,13 @@ const store = new Vuex.Store({ ...options })
4444

4545
Each module can contain `state` and `mutations` similar to the root options. A module's state will be attached to the store's root state using the module's key. A module's mutations will only receives the module's own state as the first argument instead of the root state.
4646
47-
- **middlewares**
47+
- **plugins**
4848
49-
- type: `Array<Object>`
49+
- type: `Array<Function>`
5050
51-
An array of middleware objects that are in the shape of:
51+
An array of plugin functions to be applied to the store. The plugin simply receives the store as the only argument and can either listen to mutations (for outbound data persistence, logging, or debugging) or dispatch mutations (for inbound data e.g. websockets or observables).
5252
53-
``` js
54-
{
55-
snapshot: Boolean, // default: false
56-
onInit: Function,
57-
onMutation: Function
58-
}
59-
```
60-
61-
All fields are optional. [Details](middlewares.md)
53+
[Details](plugins.md)
6254
6355
- **strict**
6456
@@ -96,9 +88,9 @@ const store = new Vuex.Store({ ...options })
9688
})
9789
```
9890
99-
- **watch(pathOrGetter: String|Function, cb: Function, [options: Object])**
91+
- **watch(getter: Function, cb: Function, [options: Object])**
10092
101-
Watch a path or a getter function's value, and call the callback when the value changes. Accepts an optional options object that takes the same options as Vue's `vm.$watch` method.
93+
Reactively watch a getter function's return value, and call the callback when the value changes. The getter receives the store's state as the only argument. Accepts an optional options object that takes the same options as Vue's `vm.$watch` method.
10294

10395
To stop watching, call the returned handle function.
10496

‎docs/en/middlewares.md

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎docs/en/mutations.md

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,6 @@ Here `10` will be passed to the mutation handler as the second argument followin
4646

4747
### Object-Style Dispatch
4848

49-
> requires >=0.6.2
50-
5149
You can also dispatch mutations using objects:
5250

5351
``` js
@@ -69,13 +67,11 @@ mutations: {
6967

7068
### Silent Dispatch
7169

72-
> requires >=0.6.3
73-
74-
In some scenarios you may not want the middlewares to record the state change. Multiple dispatches to the store in a short period or polled do not always need to be tracked. In these situations is may be considered appropriate to silence the mutations.
70+
In some scenarios you may not want the plugins to record the state change. Multiple dispatches to the store in a short period or polled do not always need to be tracked. In these situations is may be considered appropriate to silence the mutations.
7571

7672
*Note:* This should be avoided where possible. Silent mutations break the contract of all state changes being tracked by the devtool. Use sparingly and where absolutely necessary.
7773

78-
Dispatching without hitting middlewares can be achieved with a `silent` flag.
74+
Dispatching without hitting plugins can be achieved with a `silent` flag.
7975

8076
``` js
8177
/**

‎docs/en/npm-debug.log

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
0 info it worked if it ends with ok
2+
1 verbose cli [ '/Users/evan/.nvm/versions/node/v6.2.2/bin/node',
3+
1 verbose cli '/Users/evan/.nvm/versions/node/v6.2.2/bin/npm',
4+
1 verbose cli 'run',
5+
1 verbose cli 'docs' ]
6+
2 info using npm@3.9.5
7+
3 info using node@v6.2.2
8+
4 verbose stack Error: ENOENT: no such file or directory, open '/Users/evan/Vue/vuex/docs/package.json'
9+
4 verbose stack at Error (native)
10+
5 verbose cwd /Users/evan/Vue/vuex/docs/en
11+
6 error Darwin 15.3.0
12+
7 error argv "/Users/evan/.nvm/versions/node/v6.2.2/bin/node" "/Users/evan/.nvm/versions/node/v6.2.2/bin/npm" "run" "docs"
13+
8 error node v6.2.2
14+
9 error npm v3.9.5
15+
10 error path /Users/evan/Vue/vuex/docs/package.json
16+
11 error code ENOENT
17+
12 error errno -2
18+
13 error syscall open
19+
14 error enoent ENOENT: no such file or directory, open '/Users/evan/Vue/vuex/docs/package.json'
20+
15 error enoent ENOENT: no such file or directory, open '/Users/evan/Vue/vuex/docs/package.json'
21+
15 error enoent This is most likely not a problem with npm itself
22+
15 error enoent and is related to npm not being able to find a file.
23+
16 verbose exit [ -2, true ]

‎docs/en/plugins.md

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# Plugins
2+
3+
Vuex stores accept the `plugins` option that exposes hooks for each mutation. A Vuex plugin is simply a function that receives the store as the only argument:
4+
5+
``` js
6+
const myPlugin = store => {
7+
// called when the store is initialized
8+
store.on('mutation', (mutation, state) => {
9+
// called after every mutation.
10+
// The mutation comes in the format of { type, payload } for normal
11+
// dispatches, and will be the original mutation object for object-style
12+
// dispatches.
13+
})
14+
}
15+
```
16+
17+
And can be used like this:
18+
19+
``` js
20+
const store = new Vuex.Store({
21+
// ...
22+
plugins: [myPlugin]
23+
})
24+
```
25+
26+
Plugins are not allowed to directly mutate state - similar to your components, they can only trigger changes by dispatching mutations.
27+
28+
Sometimes a plugin may want to receive "snapshots" of the state, and also compare the post-mutation state with pre-mutation state. To achieve that, you will need to perform a deep-copy on the state object:
29+
30+
``` js
31+
const myPluginWithSnapshot = store => {
32+
let prevState = _.cloneDeep(store.state)
33+
store.on('mutation', (mutation, state) => {
34+
let nextState = _.cloneDeep(state)
35+
36+
// compare prevState and nextState...
37+
38+
// save state for next mutation
39+
prevState = nextState
40+
})
41+
}
42+
```
43+
44+
**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:
45+
46+
``` js
47+
const store = new Vuex.Store({
48+
// ...
49+
plugins: process.env.NODE_ENV !== 'production'
50+
? [myPluginWithSnapshot]
51+
: []
52+
})
53+
```
54+
55+
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.
56+
57+
### Built-in Logger Plugin
58+
59+
Vuex comes with a logger plugin for common debugging usage:
60+
61+
``` js
62+
import createLogger from 'vuex/logger'
63+
64+
const store = new Vuex.Store({
65+
plugins: [createLogger()]
66+
})
67+
```
68+
69+
The `createLogger` function takes a few options:
70+
71+
``` js
72+
const logger = createLogger({
73+
collapsed: false, // auto-expand logged mutations
74+
transformer (state) {
75+
// transform the state before logging it.
76+
// for example return only a specific sub-tree
77+
return state.subTree
78+
},
79+
mutationTransformer (mutation) {
80+
// mutations are logged in the format of { type, payload }
81+
// we can format it any way we want.
82+
return mutation.type
83+
}
84+
})
85+
```
86+
87+
Note the logger plugin takes state snapshots, so use it only during development.

‎docs/en/strict.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ In strict mode, whenever Vuex state is mutated outside of mutation handlers, an
1515

1616
**Do not enable strict mode when deploying for production!** Strict mode runs a deep watch on the state tree for detecting inappropriate mutations - make sure to turn it off in production to avoid the performance cost.
1717

18-
Similar to middlewares, we can let the build tools handle that:
18+
Similar to plugins, we can let the build tools handle that:
1919

2020
``` js
2121
const store = new Vuex.Store({

0 commit comments

Comments
 (0)
0