How to copy value from Vuex's state to Data without changing the Vuex's state when the copied Data get changed?

Question

I'm trying to edit a form. So I'm using Vuex to store my form information, and the form itself is inside a vuetify dialog inside a child component. I also use props to cue vuetify dialog to open while also sending an index too.

I set the edit vue data (tableUsulanTemp) with the value of vuex getters (tableUsulan) like so:

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

the markup:

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

then when user discard the changes by clicking the discard button, it will set the dialog to false which trigger watcher (look at above code) to reset my edit form data to empty object.

discard(){
 this.editOverlay = false;
}

but the problem is the data is not discarded instead it changed. I set user to change the information in the vue data but it seems it also changing in the vuex. so i guess it linked now? so how can i get it unlinked? how can i get vuex state into a vue data without changing the vuex when the vue data get changed?

Answer 1

So the solution is to parse the object to json and back

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

here is the detail