1
0
Evan You 9 жил өмнө
parent
commit
f97d106c30

+ 1 - 1
build/build.js

@@ -39,7 +39,7 @@ rollup.rollup({
 })
 .then(function () {
   return rollup.rollup({
-    entry: 'src/middlewares/logger.js',
+    entry: 'src/plugins/logger.js',
     plugins: [babel()]
   }).then(function (bundle) {
     return write('logger.js', bundle.generate({

+ 6 - 6
docs/LANGS.md

@@ -1,6 +1,6 @@
-* [English](en/)
-* [简体中文](zh-cn/)
-* [Português](pt/)
-* [Italiano](it/)
-* [Español](es/)
-* [日本語 (outdated)](ja/)
+* [English (1.0)](en/)
+* [简体中文 (0.8, outdated)](zh-cn/)
+* [Português (0.8, outdated)](pt/)
+* [Italiano (0.8, outdated)](it/)
+* [Español (0.8, outdated)](es/)
+* [日本語 (0.8, outdated)](ja/)

+ 1 - 1
docs/en/SUMMARY.md

@@ -11,7 +11,7 @@
   - [Actions](actions.md)
 - [Data Flow](data-flow.md)
 - [Application Structure](structure.md)
-- [Middlewares](middlewares.md)
+- [Plugins](middlewares.md)
 - [Strict Mode](strict.md)
 - [Form Handling](forms.md)
 - [Testing](testing.md)

+ 6 - 14
docs/en/api.md

@@ -44,21 +44,13 @@ const store = new Vuex.Store({ ...options })
 
     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.
 
-- **middlewares**
+- **plugins**
 
-  - type: `Array<Object>`
+  - type: `Array<Function>`
 
-    An array of middleware objects that are in the shape of:
+    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).
 
-    ``` js
-    {
-      snapshot: Boolean, // default: false
-      onInit: Function,
-      onMutation: Function
-    }
-    ```
-
-    All fields are optional. [Details](middlewares.md)
+    [Details](plugins.md)
 
 - **strict**
 
@@ -96,9 +88,9 @@ const store = new Vuex.Store({ ...options })
   })
   ```
 
-- **watch(pathOrGetter: String|Function, cb: Function, [options: Object])**
+- **watch(getter: Function, cb: Function, [options: Object])**
 
-  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.
+  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.
 
   To stop watching, call the returned handle function.
 

+ 0 - 83
docs/en/middlewares.md

@@ -1,83 +0,0 @@
-# Middlewares
-
-Vuex stores accept the `middlewares` option that exposes hooks for each mutation (Note this is completely unrelated to Redux middlewares). A Vuex middleware is simply an object that implements some hook functions:
-
-``` js
-const myMiddleware = {
-  onInit (state, store) {
-    // record initial state
-  },
-  onMutation (mutation, state, store) {
-    // called after every mutation.
-    // The mutation comes in the format of { type, payload }
-  }
-}
-```
-
-And can be used like this:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: [myMiddleware]
-})
-```
-
-By default, a middleware receives the actual `state` object. A middleware can also receive the `store` itself in order to dispatch mutations. Since middlewares are primarily used for debugging purposes or data persistence, they are **not allowed to mutate the state**.
-
-Sometimes a middleware may want to receive "snapshots" of the state, and also compare the post-mutation state with pre-mutation state. Such middlewares must declare the `snapshot: true` option:
-
-``` js
-const myMiddlewareWithSnapshot = {
-  snapshot: true,
-  onMutation (mutation, nextState, prevState, store) {
-    // nextState and prevState are deep-cloned snapshots
-    // of the state before and after the mutation.
-  }
-}
-```
-
-**Middlewares 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({
-  // ...
-  middlewares: process.env.NODE_ENV !== 'production'
-    ? [myMiddlewareWithSnapshot]
-    : []
-})
-```
-
-The middleware will be used by default. For production, use the build setup described [here](http://vuejs.org/guide/application.html#Deploying-for-Production) to convert the value of `process.env.NODE_ENV !== 'production'` to `false` for the final build.
-
-### Built-in Logger Middleware
-
-Vuex comes with a logger middleware for common debugging usage:
-
-``` js
-import createLogger from 'vuex/logger'
-
-const store = new Vuex.Store({
-  middlewares: [createLogger()]
-})
-```
-
-The `createLogger` function takes a few options:
-
-``` js
-const logger = createLogger({
-  collapsed: false, // auto-expand logged mutations
-  transformer (state) {
-    // transform the state before logging it.
-    // for example return only a specific sub-tree
-    return state.subTree
-  },
-  mutationTransformer (mutation) {
-    // mutations are logged in the format of { type, payload }
-    // we can format it any way we want.
-    return mutation.type
-  }
-})
-```
-
-Note the logger middleware takes state snapshots, so use it only during development.

+ 2 - 6
docs/en/mutations.md

@@ -46,8 +46,6 @@ Here `10` will be passed to the mutation handler as the second argument followin
 
 ### Object-Style Dispatch
 
-> requires >=0.6.2
-
 You can also dispatch mutations using objects:
 
 ``` js
@@ -69,13 +67,11 @@ mutations: {
 
 ### Silent Dispatch
 
-> requires >=0.6.3
-
-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. 
+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.
 
 *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.
 
-Dispatching without hitting middlewares can be achieved with a `silent` flag.
+Dispatching without hitting plugins can be achieved with a `silent` flag.
 
 ``` js
 /**

+ 23 - 0
docs/en/npm-debug.log

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

+ 87 - 0
docs/en/plugins.md

@@ -0,0 +1,87 @@
+# Plugins
+
+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:
+
+``` js
+const myPlugin = store => {
+  // called when the store is initialized
+  store.on('mutation', (mutation, state) => {
+    // called after every mutation.
+    // The mutation comes in the format of { type, payload } for normal
+    // dispatches, and will be the original mutation object for object-style
+    // dispatches.
+  })
+}
+```
+
+And can be used like this:
+
+``` js
+const store = new Vuex.Store({
+  // ...
+  plugins: [myPlugin]
+})
+```
+
+Plugins are not allowed to directly mutate state - similar to your components, they can only trigger changes by dispatching mutations.
+
+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:
+
+``` js
+const myPluginWithSnapshot = store => {
+  let prevState = _.cloneDeep(store.state)
+  store.on('mutation', (mutation, state) => {
+    let nextState = _.cloneDeep(state)
+
+    // 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:
+
+``` js
+const store = new Vuex.Store({
+  // ...
+  plugins: process.env.NODE_ENV !== 'production'
+    ? [myPluginWithSnapshot]
+    : []
+})
+```
+
+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
+
+Vuex comes with a logger plugin for common debugging usage:
+
+``` js
+import createLogger from 'vuex/logger'
+
+const store = new Vuex.Store({
+  plugins: [createLogger()]
+})
+```
+
+The `createLogger` function takes a few options:
+
+``` js
+const logger = createLogger({
+  collapsed: false, // auto-expand logged mutations
+  transformer (state) {
+    // transform the state before logging it.
+    // for example return only a specific sub-tree
+    return state.subTree
+  },
+  mutationTransformer (mutation) {
+    // mutations are logged in the format of { type, payload }
+    // we can format it any way we want.
+    return mutation.type
+  }
+})
+```
+
+Note the logger plugin takes state snapshots, so use it only during development.

+ 1 - 1
docs/en/strict.md

@@ -15,7 +15,7 @@ In strict mode, whenever Vuex state is mutated outside of mutation handlers, an
 
 **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.
 
-Similar to middlewares, we can let the build tools handle that:
+Similar to plugins, we can let the build tools handle that:
 
 ``` js
 const store = new Vuex.Store({