logger middleware

examples/shopping-cart/vuex/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Vuex from '../../../src'
+import Vuex, { loggerMiddleware } from '../../../src'
 import * as actions from './actions'
 import { cartInitialState, cartMutations } from './stores/cart'
 import { productsInitialState, productsMutations } from './stores/products'
@@ -13,5 +13,6 @@ export default new Vuex({
     products: productsInitialState
   },
   actions,
-  mutations: [cartMutations, productsMutations]
+  mutations: [cartMutations, productsMutations],
+  middlewares: [loggerMiddleware]
 })

examples/todomvc/vuex/middlewares.js

@@ -1,4 +1,5 @@
 import { STORAGE_KEY } from './index'
+import { loggerMiddleware } from '../../../src'
 
 const localStorageMiddleware = {
   onMutation (mutation, { todos }) {
@@ -6,4 +7,4 @@ const localStorageMiddleware = {
   }
 }
 
-export default [localStorageMiddleware]
+export default [localStorageMiddleware, loggerMiddleware]

src/index.js

@@ -1,8 +1,11 @@
 import mixin from './mixin'
 import Cursor from './cursor'
+import devtoolMiddleware from './middlewares/devtool'
+import loggerMiddleware from './middlewares/logger'
 
 let Vue
 
+export { loggerMiddleware }
 export default class Vuex {
 
   /**
@@ -40,13 +43,13 @@ export default class Vuex {
       : mutations
 
     // middlewares
-    this._middlewares = middlewares
+    this._middlewares = [devtoolMiddleware].concat(middlewares)
     this._needSnapshots = middlewares.some(m => m.snapshot)
     const initialSnapshot = this._prevSnapshot = this._needSnapshots
       ? deepClone(state)
       : null
     // call init hooks
-    middlewares.forEach(m => {
+    this._middlewares.forEach(m => {
       if (m.onInit) {
         m.onInit(m.snapshot ? initialSnapshot : state)
       }
@@ -76,7 +79,7 @@ export default class Vuex {
     const mutation = this._mutations[type]
     const prevSnapshot = this._prevSnapshot
     const state = this.state
-    let snapshot
+    let snapshot, clonedPayload
     if (mutation) {
       // apply the mutation
       if (Array.isArray(mutation)) {
@@ -87,10 +90,11 @@ export default class Vuex {
       // invoke middlewares
       if (this._needSnapshots) {
         snapshot = this._prevSnapshot = deepClone(state)
+        clonedPayload = deepClone(payload)
       }
       this._middlewares.forEach(m => {
         if (m.snapshot) {
-          m.onMutation({ type, payload }, snapshot, prevSnapshot)
+          m.onMutation({ type, payload: clonedPayload }, snapshot, prevSnapshot)
         } else {
           m.onMutation({ type, payload }, state)
         }
@@ -109,6 +113,14 @@ export default class Vuex {
   get state () {
     return this._vm._data
   }
+
+  /**
+   * Expose the logger middleware
+   */
+
+  static get loggerMiddleware () {
+    return loggerMiddleware
+  }
 }
 
 /**

src/middlewares/devtool.js

@@ -0,0 +1,8 @@
+export default {
+  onInit (state) {
+    // TODO
+  },
+  onMutation (mutation, state) {
+    // TODO
+  }
+}

src/middlewares/logger.js

@@ -0,0 +1,38 @@
+// Credits: borrowed code from fcomb/redux-logger
+
+export default {
+  snapshot: true,
+  onMutation (mutation, nextState, prevState) {
+    if (typeof console === 'undefined') {
+      return
+    }
+    const time = new Date()
+    const formattedTime = ` @ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`
+    const message = `mutation ${mutation.type}${formattedTime}`
+
+    // render
+    try {
+      console.group(message)
+    } catch (e) {
+      console.log(message)
+    }
+
+    console.log(`%c prev state`, `color: #9E9E9E; font-weight: bold`, prevState)
+    console.log(`%c mutation`, `color: #03A9F4; font-weight: bold`, mutation)
+    console.log(`%c next state`, `color: #4CAF50; font-weight: bold`, nextState)
+
+    try {
+      console.groupEnd()
+    } catch (e) {
+      console.log(`—— log end ——`)
+    }
+  }
+}
+
+function repeat (str, times) {
+  return (new Array(times + 1)).join(str)
+}
+
+function pad (num, maxLength) {
+  return repeat(`0`, maxLength - num.toString().length) + num
+}