如何从存储在 Vuex 中的数组中编辑本地数组？答案

【问题标题】：How to edit local array from array stored in Vuex?如何从存储在 Vuex 中的数组中编辑本地数组？
【发布时间】：2020-04-09 21:27:30
【问题描述】：

我正在尝试从 Vuex 中提取数组，在本地对其进行编辑，然后：

放弃更改而不更改 Vuex 数组，或
提交本地更改（到后端）。

此时，编辑本地数组也是更新 Vuex 中的数组——我不想这样做。

当我在表单上编辑数据并返回（不提交）时，所做的更改也将通过 Vuex 中的数组进行，而不是仅修改本地数组。

快速回顾一下我的代码：

商店：

 var app = new Vue({
        el: "#app",
        store: new Vuex.Store({
          state: {
            details: [ /* data */ ]
          }
        })
      });

HTML：

注意：这里我可以看到编辑前的默认值。

    <b-form>
     // I'm using the item and index later on
     <div v-for="(item, index) in data">
       // Just want to see what the default values are before editing
       <b-form-input v-model="form.title"></b-form-input>
     </div>
    </b-form>

脚本：

  data() {
    return {
      data: null,
      form: null
    }
  },
  beforeMount() {
    this.data = [...this.$store.state.details]
    this.form = this.data[0];
  }

如何改进我的代码，以便在本地进行更改？

【问题讨论】：

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

使用 JSON Parse 和 Stringify 制作 Vuex 状态的本地副本，没有反应。

  beforeMount() {
    this.data = [...this.$store.state.details]
    this.form = JSON.parse(JSON.stringify(this.data[0]));
  }

【讨论】：

【解决方案2】：

这是因为它只克隆数组引用而不是里面的对象，这就是所谓的“浅拷贝”，解决这个问题的最简单方法是映射details数组并克隆里面的对象。

this.data = this.$store.state.details.map(i => Object.assign({}, i));

【讨论】：