当复制的数据发生更改时，如何在不更改 Vuex 状态的情况下将值从 Vuex 的状态复制到数据？

Question

我正在尝试编辑表单。所以我使用 Vuex 来存储我的表单信息，并且表单本身位于子组件内的 vuetify 对话框中。我还使用道具提示 vuetify 对话框打开，同时也发送索引。

我将编辑 vue 数据 (tableUsulanTemp) 设置为 vuex getters (tableUsulan) 的值，如下所示：

  props: {
    value: false,
    index: null
  },
  model: {
    prop: "value",
    event: "editClicked"
  },
  // set vue data with vuex getters
  watch:{
    value:function(value){
      if(value){
        this.tableUsulanTemp = this.tableUsulan[this.$props.index];
      }else{
        this.tableUsulanTemp = {};
      }
    }
  },
  computed: {
    //here is the vuex getters
    ...mapGetters(["tableUsulan"]),
    editOverlay: {
      get: function() {
        console.log(this.value);
        return this.value;
      },
      set: function(value) {
        console.log("edit button clicked");
        this.$emit("editClicked", value);
      }
    }
  },
  data() {
    return {
      // here is vue data where i put the getters to
      tableUsulanTemp:{},
    };
  },

标记：

<v-text-field
    label="Name"
    v-model="tableUsulanTemp.name"
>

然后当用户通过单击放弃按钮放弃更改时，它会将对话框设置为 false 触发观察者（查看上面的代码）将我的编辑表单数据重置为空对象。

discard(){
 this.editOverlay = false;
}

但问题是数据没有被丢弃，而是被改变了。我将用户设置为更改 vue 数据中的信息，但似乎它在 vuex 中也发生了变化。所以我猜它现在链接了？那么我怎样才能取消链接呢？当 vue 数据发生更改时，如何在不更改 vuex 的情况下将 vuex 状态转换为 vue 数据？

Answer 1

所以解决办法是把对象解析成json再返回

this.tableUsulanTemp = JSON.parse(JSON.stringify(this.tableUsulan));

这里是detail