Get data from Vuex store without reactivity?

[omgwalt]

Is there a way to put data from the Vuex store into an input field without making that data reactive to what’s currently in the store?

I want to put the last-entered username from the store into the username field by default.

<q-input
:value="this.dataFromVuexStore"/>

If I draw directly from the store by binding a variable for the data using the code above, the input field’s reactivity keeps restoring it to the data from the store when the user leaves the field to go to the next field instead of allowing the user’s different entry to stay.

But:

<q-input
value="this.dataFromVuexStore"/>

If I don’t bind the value field, the variable simply becomes text.

How can I add data from the store to the input field without making it reactive?

[metalsadman]

@omgwalt make a local deep copy of that vuex state object. try shallow copy first like this.someData = Object.assign({}, this.$store.state.someState) if it’s still referencing the vuex, then do the deep copy this.someData = JSON.parse(JSON.stringify(this.$store.state.someState)). can also use the quasar deep copy util function https://quasar.dev/quasar-utils/other-utils#(Deep)-Copy-Objects.

[omgwalt]

I’ve never heard of “deep copy” before. What does it mean?

[metalsadman]

@omgwalt https://we-are.bookmyshow.com/understanding-deep-and-shallow-copy-in-javascript-13438bad941c also to understand more why you need to deep copy/clone https://medium.com/nodesimplified/javascript-pass-by-value-and-pass-by-reference-in-javascript-fcf10305aa9c & https://scotch.io/bar-talk/copying-objects-in-javascript.