如何使用 .slice'd 数组修复 vuex 突变警告

Question

这个错误让我抓狂

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

我有一个异步 vue/nuxt 方法，它在用户想要编辑 his/her post 时触发。我正在使用 vuex 的商店来制作 link 和我的 API.
我正在使用组件数据在用户执行操作时保存内容更改，这是一个基本配置。

当我尝试对我的媒体进行排序时出现错误。
无论我多么努力地试图破坏引用，vue 都一直在用它的“不要改变外部处理程序”错误对我大喊大叫。

代码如下：

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;
  }
},

vuex 变异错误是由这一行触发的：

newArray[i].order = i + 1;

我要编辑的数组是 post 对象中的媒体对象数组。

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

我不明白我在哪里更改存储状态数据。我已经阅读了几个关于 vuex 变异错误的答案，但我无法将它们与我的案例相匹配。

Answer 1

.slice 只对您的数组进行 shallow copy ，因此由于您正在更深地访问它，因此它抱怨发生突变，因为您仍然将参考 1 级别定位在下面.

一个解决方案是

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

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

它可能不像 mentioned here 那样有奇怪的行为，因为它是 lodash，您可以完全导入它并知道它已经过优化。
只是不要导入整个库，而只导入有用的方法，因此为什么 destructuring + lodash-es.

PS：要小心，因为.sort also mutates是一个数组。

如何使用 .slice'd 数组修复 vuex 突变警告

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

vuejs2

nuxt.js