middlewares -> plugins

Author: yyx990803

examples/chat/vuex/store.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from '../../../src'
 import mutations from './mutations'
-import createLogger from '../../../src/middlewares/logger'
+import createLogger from '../../../src/plugins/logger'
 
 Vue.use(Vuex)
 
@@ -33,7 +33,7 @@ export default new Vuex.Store({
     }
   },
   mutations,
-  middlewares: process.env.NODE_ENV !== 'production'
+  plugins: process.env.NODE_ENV !== 'production'
     ? [createLogger()]
     : []
 })

examples/counter/store.js

@@ -12,7 +12,7 @@ const state = {
 // mutations are operations that actually mutates the state.
 // each mutation handler gets the entire state tree as the
 // first argument, followed by additional payload arguments.
-// mutations must be synchronous and can be recorded by middlewares
+// mutations must be synchronous and can be recorded by plugins
 // for debugging purposes.
 const mutations = {
   INCREMENT (state) {
@@ -27,10 +27,6 @@ const mutations = {
 // and the mutations. Because the actions and mutations are just
 // functions that do not depend on the instance itself, they can
 // be easily tested or even hot-reloaded (see counter-hot example).
-//
-// You can also provide middlewares, which is just an array of
-// objects containing some hooks to be called at initialization
-// and after each mutation.
 export default new Vuex.Store({
   state,
   mutations

examples/shopping-cart/vuex/store.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Vuex from '../../../src'
 import cart from './modules/cart'
 import products from './modules/products'
-import createLogger from '../../../src/middlewares/logger'
+import createLogger from '../../../src/plugins/logger'
 
 Vue.use(Vuex)
 Vue.config.debug = true
@@ -15,5 +15,5 @@ export default new Vuex.Store({
     products
   },
   strict: debug,
-  middlewares: debug ? [createLogger()] : []
+  plugins: debug ? [createLogger()] : []
 })

examples/todomvc/vuex/middlewares.js

@@ -0,0 +1,12 @@
+import { STORAGE_KEY } from './store'
+import createLogger from '../../../src/plugins/logger'
+
+const localStoragePlugin = store => {
+  store.on('mutation', (mutation, { todos }) => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
+  })
+}
+
+export default process.env.NODE_ENV !== 'production'
+  ? [createLogger(), localStoragePlugin]
+  : [localStoragePlugin]

examples/todomvc/vuex/plugins.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Vuex from '../../../src'
-import middlewares from './middlewares'
+import plugins from './plugins'
 
 Vue.use(Vuex)
 
@@ -49,5 +49,5 @@ const mutations = {
 export default new Vuex.Store({
   state,
   mutations,
-  middlewares
+  plugins
 })

examples/todomvc/vuex/store.js

@@ -1,8 +1,8 @@
 import {
-  mergeObjects, deepClone, isObject,
+  mergeObjects, isObject,
   getNestedState, getWatcher
 } from './util'
-import devtoolMiddleware from './middlewares/devtool'
+import devtoolPlugin from './plugins/devtool'
 import override from './override'
 
 let Vue
@@ -15,21 +15,22 @@ class Store {
    *        - {Object} state
    *        - {Object} actions
    *        - {Object} mutations
-   *        - {Array} middlewares
+   *        - {Array} plugins
    *        - {Boolean} strict
    */
 
   constructor ({
     state = {},
     mutations = {},
     modules = {},
-    middlewares = [],
+    plugins = [],
     strict = false
   } = {}) {
     this._getterCacheId = 'vuex_store_' + uid++
     this._dispatching = false
     this._rootMutations = this._mutations = mutations
     this._modules = modules
+    this._events = Object.create(null)
     // bind dispatch to self
     const dispatch = this.dispatch
     this.dispatch = (...args) => {
@@ -53,11 +54,13 @@ class Store {
     Vue.config.silent = silent
     this._setupModuleState(state, modules)
     this._setupModuleMutations(modules)
-    this._setupMiddlewares(middlewares, state)
     // add extra warnings in strict mode
     if (strict) {
       this._setupMutationCheck()
     }
+    // apply plugins
+    devtoolPlugin(this)
+    plugins.forEach(plugin => plugin(this))
   }
 
   /**
@@ -91,25 +94,28 @@ class Store {
       if (type.silent) silent = true
       type = type.type
     }
-    const mutation = this._mutations[type]
+    const handler = this._mutations[type]
     const state = this.state
-    if (mutation) {
+    if (handler) {
       this._dispatching = true
       // apply the mutation
-      if (Array.isArray(mutation)) {
-        mutation.forEach(m => {
+      if (Array.isArray(handler)) {
+        handler.forEach(h => {
           isObjectStyleDispatch
-            ? m(state, payload)
-            : m(state, ...payload)
+            ? h(state, payload)
+            : h(state, ...payload)
         })
       } else {
         isObjectStyleDispatch
-          ? mutation(state, payload)
-          : mutation(state, ...payload)
+          ? handler(state, payload)
+          : handler(state, ...payload)
       }
       this._dispatching = false
       if (!silent) {
-        this._applyMiddlewares(type, payload, isObjectStyleDispatch)
+        const mutation = isObjectStyleDispatch
+          ? payload
+          : { type, payload }
+        this.emit('mutation', mutation, state)
       }
     } else {
       console.warn(`[vuex] Unknown mutation: ${type}`)
@@ -246,71 +252,6 @@ class Store {
     }, { deep: true, sync: true })
     /* eslint-enable no-new */
   }
-
-  /**
-   * Setup the middlewares. The devtools middleware is always
-   * included, since it does nothing if no devtool is detected.
-   *
-   * A middleware can demand the state it receives to be
-   * "snapshots", i.e. deep clones of the actual state tree.
-   *
-   * @param {Array} middlewares
-   * @param {Object} state
-   */
-
-  _setupMiddlewares (middlewares, state) {
-    this._middlewares = [devtoolMiddleware].concat(middlewares)
-    this._needSnapshots = middlewares.some(m => m.snapshot)
-    if (this._needSnapshots) {
-      console.log(
-        '[vuex] One or more of your middlewares are taking state snapshots ' +
-        'for each mutation. Make sure to use them only during development.'
-      )
-    }
-    const initialSnapshot = this._prevSnapshot = this._needSnapshots
-      ? deepClone(state)
-      : null
-    // call init hooks
-    this._middlewares.forEach(m => {
-      if (m.onInit) {
-        m.onInit(m.snapshot ? initialSnapshot : state, this)
-      }
-    })
-  }
-
-  /**
-   * Apply the middlewares on a given mutation.
-   *
-   * @param {String} type
-   * @param {Array} payload
-   * @param {Boolean} isObjectStyleDispatch
-   */
-
-  _applyMiddlewares (type, payload, isObjectStyleDispatch) {
-    const state = this.state
-    const prevSnapshot = this._prevSnapshot
-    let snapshot, clonedPayload
-    if (this._needSnapshots) {
-      snapshot = this._prevSnapshot = deepClone(state)
-      clonedPayload = deepClone(payload)
-    }
-    this._middlewares.forEach(m => {
-      if (m.onMutation) {
-        const mutation = isObjectStyleDispatch
-          ? m.snapshot
-            ? clonedPayload
-            : payload
-          : m.snapshot
-            ? { type, payload: clonedPayload }
-            : { type, payload }
-        if (m.snapshot) {
-          m.onMutation(mutation, snapshot, prevSnapshot, this)
-        } else {
-          m.onMutation(mutation, state, this)
-        }
-      }
-    })
-  }
 }
 
 function install (_Vue) {
@@ -321,6 +262,10 @@ function install (_Vue) {
     return
   }
   Vue = _Vue
+  // reuse Vue's event system
+  ;['on', 'off', 'once', 'emit'].forEach(e => {
+    Store.prototype[e] = Store.prototype['$' + e] = Vue.prototype['$' + e]
+  })
   override(Vue)
 }
 

src/index.js

@@ -0,0 +1,19 @@
+const hook =
+  typeof window !== 'undefined' &&
+  window.__VUE_DEVTOOLS_GLOBAL_HOOK__
+
+export default function devtoolPlugin (store) {
+  if (!hook) return
+
+  hook.emit('vuex:init', store)
+
+  hook.on('vuex:travel-to-state', targetState => {
+    store._dispatching = true
+    store._vm.state = targetState
+    store._dispatching = false
+  })
+
+  store.on('mutation', (mutation, state) => {
+    hook.emit('vuex:mutation', mutation, state)
+  })
+}