Ошибка Vuex, при сортировке локального массива - PullRequest
Новая
       13

Ошибка Vuex, при сортировке локального массива

0 голосов
/ 01 июня 2018

Я использую 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)

1 Ответ

0 голосов
/ 01 июня 2018

Array.prototype.sort изменяет массив, к которому вы его вызываете.

Предполагая, что cmp.getPurposesAllowed() возвращает ссылку на массив в вашем хранилище vuex, вы изменяете этот массив из хранилища, как ошибкаВ сообщении говорится.

Решение. Сделайте поверхностную копию массива до: 

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