Vuex错误，排序本地数组时

Question

我在我的应用程序的 UI 中使用 Vuejs 和 Vuex，这个应用程序有许多文件，其中充满了实用程序和基于逻辑的功能。

在其中一个文件中，我有一个函数，它返回一个承诺并执行一些数组操作，如下所示：

function firePixels (clientId, result) {
  return new Promise((resolve, reject) => {

    const purposesZ = [1,2,3,4,5];
    let purposeArrayZ = cmp.getPurposesAllowed();
    purposeArrayZ.sort((a, b) => a - b);

    if(isEqual(purposesZ,purposeArrayZ)){
      console.log("equal!");
      resolve(console.log("equal!"));
    }
  });
}

我添加了Z 来测试唯一名称，但无论如何它们都应该是局部变量。

来自 Vuex 的错误：

vue.runtime.esm.js:588 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

(found in <Root>)
warn @ vue.runtime.esm.js:588
logError @ vue.runtime.esm.js:1732
globalHandleError @ vue.runtime.esm.js:1727
handleError @ vue.runtime.esm.js:1716
run @ vue.runtime.esm.js:3230
update @ vue.runtime.esm.js:3202
notify @ vue.runtime.esm.js:694
mutator @ vue.runtime.esm.js:841
(anonymous) @ main.js:91
fireGtmPixels @ main.js:83
(anonymous) @ main.js:69
Promise.then (async)
(anonymous) @ main.js:68
Promise.then (async)
(anonymous) @ main.js:64
./client/main.js @ cmp:263
__webpack_require__ @ cmp:62
(anonymous) @ cmp:179
(anonymous) @ cmp:182
vue.runtime.esm.js:1736 Error: [vuex] Do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js:105)
    at Vue.store._vm.$watch.deep (vuex.esm.js:754)
    at Watcher.run (vue.runtime.esm.js:3228)
    at Watcher.update (vue.runtime.esm.js:3202)
    at Dep.notify (vue.runtime.esm.js:694)
    at Array.mutator (vue.runtime.esm.js:841)
    at eval (main.js:91)
    at new Promise (<anonymous>)
    at fireGtmPixels (main.js:83)
    at eval (main.js:69)
logError @ vue.runtime.esm.js:1736
globalHandleError @ vue.runtime.esm.js:1727
handleError @ vue.runtime.esm.js:1716
run @ vue.runtime.esm.js:3230
update @ vue.runtime.esm.js:3202
notify @ vue.runtime.esm.js:694
mutator @ vue.runtime.esm.js:841
(anonymous) @ main.js:91
fireGtmPixels @ main.js:83
(anonymous) @ main.js:69
Promise.then (async)
(anonymous) @ main.js:68
Promise.then (async)
(anonymous) @ main.js:64
./client/main.js @ cmp:263
__webpack_require__ @ cmp:62
(anonymous) @ cmp:179
(anonymous) @ cmp:182
vue.runtime.esm.js:588 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

(found in <Root>)
warn @ vue.runtime.esm.js:588
logError @ vue.runtime.esm.js:1732
globalHandleError @ vue.runtime.esm.js:1727
handleError @ vue.runtime.esm.js:1716
run @ vue.runtime.esm.js:3230
update @ vue.runtime.esm.js:3202
notify @ vue.runtime.esm.js:694
mutator @ vue.runtime.esm.js:841
(anonymous) @ main.js:94
fireGtmPixels @ main.js:83
(anonymous) @ main.js:69
Promise.then (async)
(anonymous) @ main.js:68
Promise.then (async)
(anonymous) @ main.js:64
./client/main.js @ cmp:263
__webpack_require__ @ cmp:62
(anonymous) @ cmp:179
(anonymous) @ cmp:182
vue.runtime.esm.js:1736 Error: [vuex] Do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js:105)
    at Vue.store._vm.$watch.deep (vuex.esm.js:754)
    at Watcher.run (vue.runtime.esm.js:3228)
    at Watcher.update (vue.runtime.esm.js:3202)
    at Dep.notify (vue.runtime.esm.js:694)
    at Array.mutator (vue.runtime.esm.js:841)
    at eval (main.js:94)
    at new Promise (<anonymous>)
    at fireGtmPixels (main.js:83)
    at eval (main.js:69)

Answer 1

Array.prototype.sort 改变你调用它的数组。

假设 cmp.getPurposesAllowed() 返回对您的 vuex 存储中的数组的引用，您正在从存储中更改该数组，就像错误消息中所说的那样。

解决方法：先做一个数组的浅拷贝：

let purposeArrayZ = cmp.getPurposesAllowed().slice();