How to edit local array from array stored in Vuex?

Question

I'm trying to extract array from Vuex, edit it locally, then:

Discard changes without changing the Vuex array, or
Submit local changes (to backend).

At this point, editing the local array is also updating the array in Vuex -- which I don't want to.

When I edit the data on the form and return (without submit), the changes are also carried over the the array in Vuex instead of only modifying the local array.

Quick recap of my code:

Store:

 var app = new Vue({
        el: "#app",
        store: new Vuex.Store({
          state: {
            details: [ /* data */ ]
          }
        })
      });

HTML:

Note: Here I can see in what the default values are before edit.

    <b-form>
     // I'm using the item and index later on
     <div v-for="(item, index) in data">
       // Just want to see what the default values are before editing
       <b-form-input v-model="form.title"></b-form-input>
     </div>
    </b-form>

Script:

  data() {
    return {
      data: null,
      form: null
    }
  },
  beforeMount() {
    this.data = [...this.$store.state.details]
    this.form = this.data[0];
  }

How can I improve my code, so that I can make changes locally?

enriqg9 · Accepted Answer · 2020-04-09 21:43:34Z

1

Use JSON Parse and Stringify to make a local copy of the Vuex State with no reactivity.

  beforeMount() {
    this.data = [...this.$store.state.details]
    this.form = JSON.parse(JSON.stringify(this.data[0]));
  }

answered Apr 9, 2020 at 21:43

enriqg9

1,5071 gold badge22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hassan Juniedi · Accepted Answer · 2020-04-09 21:48:28Z

1

That's because it's only clone the array reference and not the objects inside and thats called 'shallow copy', the easiest way to solve this would be to map details array and clone the objects inside.

this.data = this.$store.state.details.map(i => Object.assign({}, i));

answered Apr 9, 2020 at 21:48

Hassan Juniedi

4135 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to edit local array from array stored in Vuex?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related