fix(vuex): clone mutation payload instead of stringify, closes #953

Author: Guillaume Chau

package.json

@@ -86,4 +86,4 @@
   "engines": {
     "node": ">=8.10"
   }
-}
+}

src/backend/clone.js

@@ -0,0 +1,193 @@
+// Clone deep utility for cloning initial state of the store
+// REFERENCE: https://github.com/pvorb/clone
+
+let NativeMap
+try {
+  NativeMap = Map
+} catch (_) {
+  // maybe a reference error because no `Map`. Give it a dummy value that no
+  // value will ever be an instanceof.
+  NativeMap = function () {}
+}
+
+let NativeSet
+try {
+  NativeSet = Set
+} catch (_) {
+  NativeSet = function () {}
+}
+
+let NativePromise
+try {
+  NativePromise = Promise
+} catch (_) {
+  NativePromise = function () {}
+}
+
+export default function clone (parent, { circular = true, depth = Infinity, prototype, includeNonEnumerable } = {}) {
+  // maintain two arrays for circular references, where corresponding parents
+  // and children have the same index
+  var allParents = []
+  var allChildren = []
+
+  var useBuffer = typeof Buffer !== 'undefined' && typeof Buffer.isBuffer === 'function'
+
+  // recurse this function so we don't reset allParents and allChildren
+  function _clone (parent, depth) {
+    // cloning null always returns null
+    if (parent === null) { return null }
+
+    if (depth === 0) { return parent }
+
+    var child
+    var proto
+    if (typeof parent !== 'object') {
+      return parent
+    }
+
+    if (_instanceof(parent, NativeMap)) {
+      child = new NativeMap()
+    } else if (_instanceof(parent, NativeSet)) {
+      child = new NativeSet()
+    } else if (_instanceof(parent, NativePromise)) {
+      child = new NativePromise(function (resolve, reject) {
+        parent.then(function (value) {
+          resolve(_clone(value, depth - 1))
+        }, function (err) {
+          reject(_clone(err, depth - 1))
+        })
+      })
+    } else if (clone.__isArray(parent)) {
+      child = []
+    } else if (clone.__isRegExp(parent)) {
+      child = new RegExp(parent.source, __getRegExpFlags(parent))
+      if (parent.lastIndex) child.lastIndex = parent.lastIndex
+    } else if (clone.__isDate(parent)) {
+      child = new Date(parent.getTime())
+    } else if (useBuffer && Buffer.isBuffer(parent)) {
+      if (Buffer.from) {
+        // Node.js >= 5.10.0
+        child = Buffer.from(parent)
+      } else {
+        // Older Node.js versions
+        // eslint-disable-next-line node/no-deprecated-api
+        child = new Buffer(parent.length)
+        parent.copy(child)
+      }
+      return child
+    } else if (_instanceof(parent, Error)) {
+      child = Object.create(parent)
+    } else {
+      if (typeof prototype === 'undefined') {
+        proto = Object.getPrototypeOf(parent)
+        child = Object.create(proto)
+      } else {
+        child = Object.create(prototype)
+        proto = prototype
+      }
+    }
+
+    if (circular) {
+      var index = allParents.indexOf(parent)
+
+      if (index !== -1) {
+        return allChildren[index]
+      }
+      allParents.push(parent)
+      allChildren.push(child)
+    }
+
+    if (_instanceof(parent, NativeMap)) {
+      parent.forEach(function (value, key) {
+        var keyChild = _clone(key, depth - 1)
+        var valueChild = _clone(value, depth - 1)
+        child.set(keyChild, valueChild)
+      })
+    }
+    if (_instanceof(parent, NativeSet)) {
+      parent.forEach(function (value) {
+        var entryChild = _clone(value, depth - 1)
+        child.add(entryChild)
+      })
+    }
+
+    for (var i in parent) {
+      var attrs = Object.getOwnPropertyDescriptor(parent, i)
+      if (attrs) {
+        if (attrs.hasOwnProperty('get') && attrs.get.name === 'computedGetter') {
+          Object.defineProperty(child, i, attrs)
+          continue
+        }
+
+        child[i] = _clone(parent[i], depth - 1)
+      }
+    }
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(parent)
+      for (let i = 0; i < symbols.length; i++) {
+        // Don't need to worry about cloning a symbol because it is a primitive,
+        // like a number or string.
+        var symbol = symbols[i]
+        var descriptor = Object.getOwnPropertyDescriptor(parent, symbol)
+        if (descriptor && !descriptor.enumerable && !includeNonEnumerable) {
+          continue
+        }
+        child[symbol] = _clone(parent[symbol], depth - 1)
+        Object.defineProperty(child, symbol, descriptor)
+      }
+    }
+
+    if (includeNonEnumerable) {
+      var allPropertyNames = Object.getOwnPropertyNames(parent)
+      for (let i = 0; i < allPropertyNames.length; i++) {
+        const propertyName = allPropertyNames[i]
+        let descriptor = Object.getOwnPropertyDescriptor(parent, propertyName)
+        if (descriptor && descriptor.enumerable) {
+          continue
+        }
+        child[propertyName] = _clone(parent[propertyName], depth - 1)
+        Object.defineProperty(child, propertyName, descriptor)
+      }
+    }
+
+    return child
+  }
+
+  return _clone(parent, depth)
+}
+
+// private utility functions
+
+function __objToStr (o) {
+  return Object.prototype.toString.call(o)
+}
+clone.__objToStr = __objToStr
+
+function __isDate (o) {
+  return typeof o === 'object' && __objToStr(o) === '[object Date]'
+}
+clone.__isDate = __isDate
+
+function __isArray (o) {
+  return typeof o === 'object' && __objToStr(o) === '[object Array]'
+}
+clone.__isArray = __isArray
+
+function __isRegExp (o) {
+  return typeof o === 'object' && __objToStr(o) === '[object RegExp]'
+}
+clone.__isRegExp = __isRegExp
+
+function __getRegExpFlags (re) {
+  var flags = ''
+  if (re.global) flags += 'g'
+  if (re.ignoreCase) flags += 'i'
+  if (re.multiline) flags += 'm'
+  return flags
+}
+clone.__getRegExpFlags = __getRegExpFlags
+
+function _instanceof (obj, type) {
+  return type != null && obj instanceof type
+}

src/backend/vuex.js

@@ -2,6 +2,7 @@ import { stringify, parse } from 'src/util'
 import SharedData from 'src/shared-data'
 import { set, get } from '../util'
 import Vue from 'vue'
+import clone from './clone'
 
 const isProd = process.env.NODE_ENV === 'production'
 
@@ -83,7 +84,7 @@ export function initVuexBackend (hook, bridge, isLegacy) {
         options
       }, {
         registerModule: true
-      }, false)
+      })
     }
 
     return moduleInfo
@@ -110,7 +111,7 @@ export function initVuexBackend (hook, bridge, isLegacy) {
           path
         }, {
           unregisterModule: true
-        }, false)
+        })
       }
 
       origUnregisterModule(path)
@@ -137,14 +138,14 @@ export function initVuexBackend (hook, bridge, isLegacy) {
     addMutation(type, payload)
   })
 
-  function addMutation (type, payload, options = {}, stringifyPayload = true) {
+  function addMutation (type, payload, options = {}) {
     const index = mutations.length
 
-    const payloadData = stringify(payload)
-
     mutations.push({
       type,
-      payload: stringifyPayload ? payloadData : payload,
+      payload: clone(payload, {
+        includeNonEnumerable: true
+      }),
       index,
       handlers: store._mutations[type],
       registeredModules: Object.keys(registeredModules),
@@ -154,7 +155,7 @@ export function initVuexBackend (hook, bridge, isLegacy) {
     bridge.send('vuex:mutation', {
       mutation: {
         type: type,
-        payload: payloadData,
+        payload: stringify(payload),
         index
       },
       timestamp: Date.now()
@@ -297,7 +298,7 @@ export function initVuexBackend (hook, bridge, isLegacy) {
         } else if (mutation.handlers) {
           store._committing = true
           try {
-            const payload = parse(mutation.payload, true)
+            const payload = mutation.payload
             if (Array.isArray(mutation.handlers)) {
               mutation.handlers.forEach(handler => handler(payload))
             } else {