Vuex Error, when sorting local Array

Question

I am using Vuejs and Vuex for the UI of my app, this app has many files full of util and logic based functions.

In one of these files, I have a function, which returns a promises and does some array manipulations, as per the below:

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!"));
    }
  });
}

I have added the Z to test for unique names, but they should be local variables anyway.

My error from 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 mutates the array that you call it on.

Assuming that cmp.getPurposesAllowed() returns a reference to an array in your vuex store, your are mutating that array from the store, just like the error message says.

Solution: Make a shallow copy of the array before:

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