Как редактировать локальный массив из массива, хранящегося в Vuex?

Question

Я пытаюсь извлечь массив из Vuex, отредактировать его локально, затем:

1. Отменить изменения без изменения массива Vuex или
2. Отправить локальные изменения (в бэкэнд) ,

На этом этапе редактирование локального массива также обновляет массив в Vuex, чего я не хочу.

Когда я редактирую данные в форме и возвращаю (без отправки), изменения также переносятся по массиву в Vuex, а не только изменяют локальный массив.

Краткий обзор моего кода:

Магазин:

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

HTML:

Примечание: здесь я могу посмотрите, какие значения по умолчанию перед редактированием.

    <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>

Скрипт:

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

Как я могу улучшить свой код, чтобы я мог вносить изменения локально?

Answer 1

Это потому, что это только клонирование ссылки на массив, а не объекты внутри, и это называется «мелкая копия», самый простой способ решить эту проблему - сопоставить массив details и клонировать объекты внутри.

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

Answer 2

Используйте JSON Parse и Stringify для создания локальной копии состояния Vuex без реактивности.

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