How can I clone data from Vuex state to local data?

Question

How can I clone data from vuex state to local data attribute?

State

this.tsStore.shemes

Data Attribute

Answer 1

data(){
  return {
    shemes: null,
  }
},
beforeMount() {
  this.shemes = this.stateShemes
},
computed: {
  stateShemes() { return this.tsState.shemes }
  // OR that's how i do
  stateShemes() { return this.$store.getters['shemes'] }
}

UPDATE

So you get some value from your state by using computed variables. You cannot just assign the value from you store in the data() block. So you should do it beforeMount. That way if you have a watcher for shemes variable, it won't trigger on assigning computed value. If you put it in mounted() hook, the watcher will trigger.

Also, can you explain why do you use this call this.tsState.shemes instead of this.$store.getters.shemes?

Answer 2

try

this.shemes = JSON.parse ( JSON.stringify ( this.tsStore.shemes) )

This will clone all value and objects from the array in the store.

Answer 3

You need to create a new array. this.tsStore.shemes give you a reference to the bound array. You can try to use the spread operator or arr.slice() to create a new array with the same content. notice that this is a shallow copy.

this.shemes = [...this.tsStore.shemes]

or

this.shemes = this.tsStore.shemes.slice()