update docs for strict/logger

docs/en/SUMMARY.md

@@ -7,9 +7,9 @@
   - [Actions](actions.md)
 - [Data Flow](data-flow.md)
 - [Application Structure](structure.md)
-- [Debug Mode](debug.md)
-- [Form Handling](forms.md)
 - [Middlewares](middlewares.md)
+- [Strict Mode](strict.md)
+- [Form Handling](forms.md)
 - [Testing](testing.md)
 - [Hot Reloading](hot-reload.md)
 - [API Reference](api.md)

docs/en/debug.md

@@ -1,57 +0,0 @@
-# Debug Mode
-
-To enable debug mode, simply pass in `debug: true` when creating the Vuex instance:
-
-``` js
-const vuex = new Vuex({
-  state,
-  actions,
-  mutations,
-  debug: true
-})
-```
-
-In debug mode, two features are enabled:
-
-1. Every mutation dispatched will be logged in the console, along with a snapshot of the state before that mutation, and a snapshot of the state after that mutation.
-
-2. Whenever Vuex state is mutated outside of mutation handlers, an error will be thrown. This ensures that all state mutations can be explicitly tracked by debugging tools.
-
-### Debug vs. Production
-
-**Do not use debug mode in production!** Debug mode takes a snapshot of the entire state tree for each mutation, and runs a deep watch on the state tree for detecting inappropriate mutations - make sure to turn off debug mode in production to avoid the performance cost.
-
-When using Webpack or Browserify, we can let our build tools handle that for us:
-
-``` js
-const vuex = new Vuex({
-  // ...
-  debug: process.env.NODE_ENV !== 'production'
-})
-```
-
-In Webpack/Browserify, this will result in debug mode being on by default. Then, use the build setup described [here](http://vuejs.org/guide/application.html#Deploying_for_Production) to convert the value to `false` when building for production.
-
-### Configuring the Logger
-
-You can pass in the `debugOptions` option to configure the logger:
-
-``` js
-const vuex = new Vuex({
-  // ...
-  debug: true,
-  debugOptions: {
-    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 anyway we want.
-      return mutation.type
-    }
-  }
-})
-```

docs/en/middlewares.md

@@ -0,0 +1,81 @@
+# Middlewares
+
+Vuex instances 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) {
+    // record initial state
+  },
+  onMutation (mutation, state) {
+    // called after every mutation.
+    // The mutation comes in the format of { type, payload }
+  }
+}
+```
+
+And can be used like this:
+
+``` js
+const vuex = new Vuex({
+  // ...
+  middlewares: [myMiddleware]
+})
+```
+
+By default, a middleware receives the actual `state` object. Since middlewares are primarily used for debugging purposes, 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) {
+    // 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 vuex = new Vuex({
+  // ...
+  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
+
+Veux comes with a logger middleware for common debugging usage:
+
+``` js
+const vuex = new Vuex({
+  middlewares: [Vuex.createLogger()]
+})
+```
+
+The `createLogger` function takes a few options:
+
+``` js
+const logger = Vuex.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 anyway we want.
+    return mutation.type
+  }
+})
+```
+
+Note the logger middleware takes state snapshots, so use it only during development.

docs/en/strict.md

@@ -0,0 +1,25 @@
+# Strict Mode
+
+To enable strict mode, simply pass in `strict: true` when creating the Vuex instance:
+
+``` js
+const vuex = new Vuex({
+  // ...
+  strict: true
+})
+```
+
+In strict mode, whenever Vuex state is mutated outside of mutation handlers, an error will be thrown. This ensures that all state mutations can be explicitly tracked by debugging tools.
+
+### Development vs. Production
+
+**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:
+
+``` js
+const vuex = new Vuex({
+  // ...
+  strict: process.env.NODE_ENV !== 'production'
+})
+```