How to fix a vuex mutation warning with a .slice'd array

Question

I'm getting nuts with this error

[vuex] do not mutate vuex store state outside mutation handlers

I have a asynchronous vue/nuxt method that is triggered when the user wants to edit his/her post. I'm using vuex' store to make the link with my API.
I'm using component data to save content changes while the user is doing actions, a basic configuration.

The error came when I was trying to sort my media.
No matter how hard I'm trying to break references, vue keeps shouting at me with its "do not mutate outside handlers" errors.

Here's the code :

async editSouvenir(id, data) {
  try {
    this.isLoading = true;
    if (this.filesToAdd) {
      for (let file of this.filesToAdd) {
        await this.$store.dispatch('media/CREATE_MEDIA', {
          souvenirId: id,
          file,
        });
        this.fileCtn++;
      }
    }

    if (data.mediaTab.length > 0) {
      let newOrder = 1;
      const newMediaTab = this.newMediaTab;
      // browsing media list
      const newArray = data.mediaTab.slice().sort((a, b) => {
        return newMediaTab.indexOf(a) - newMediaTab.indexOf(b);
      });

      // updating order
      for (let i = 0; i < newArray.length; i++) {
        newArray[i].order = i + 1;
      }

      // saving media data
      data.mediaTab = newArray;
      console.log(data.mediaTab);
    }

    this.isLoading = false;
    if (
      !this.createSouvenirError &&
      !this.createMediaError &&
      !this.postMediaError
    ) {
      await this.$store.dispatch('souvenir/EDIT', { id, data });
      this.$router.push({
        path: '/pns-editor',
        query: { selectedYear: data.date.substr(0, 4), souvenir: id },
      });
    } else {
      // @todo gérer l'erreur
    }
  } catch (err) {
    console.log(err);
    // this.isLoading = false;
  }
},

the vuex mutating error is triggered by this line :

newArray[i].order = i + 1;

The array I'm trying to edit is an array of media objects within the post object.

{ 
    id: 1235354,
    title: 'my title',
    mediaTab: [{
       ** my array of objects **
    }]
}

I don't understand where I mutate store state data. I've read several answers concerning vuex mutating error, but i'm not able to match them with my case.

Answer 1

.slice only makes a shallow copy of your array, hence since you're accessing it one level deeper, it is complaining of a mutation because you're still targeting the reference 1 level below.

One solution would be

<script>
import { cloneDeep } from 'lodash-es'

...
const newArray = cloneDeep(data.mediaTab)

It may not have weird behavior as mentioned here and since it's lodash, you can totally import it and know that it's optimized.
Just don't import the whole library, but only the useful method, hence why destructuring + lodash-es.

PS: be careful because .sort also mutates an array.