Question

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

我将编辑vue数据（tableUsulanTemp）设置为vuex吸气剂（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

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

1 个答案: