Vuex - локальной переменной присвоено значение mapState, изменение локальной переменной также меняет переменную хранилища?

Question

Почему мой исходный объект Vuex изменяется, когда я присваиваю его значение локальной переменной и манипулирую этим локальным значением? Я могу опубликовать свой магазин. js, если необходимо.

У меня что-то вроде этого:

  data() {
    return {
      localObject: [],
    };
  },
computed: mapState(["storeObject"]), // main store object
  created() {
    this.localObject = this.storeObject;
    this.prepareData();
  },
methods: {
    prepareData() {
      this.localObject.forEach((event, i) => {
        delete event.artist_supporting;
        delete event.genre;
      });
      // console.log(this.storeObject); // why is this object getting changed by the localObject.forEach? 
    }
}

Вот полный блок computed (). Если я консолью this.eventsData в верхней части вычисленного значения calendarData(), оно будет завершено, как и ожидалось. Но если я консолью this.eventsData внизу, перед возвратом, он изменится, как если бы я манипулировал им напрямую.

computed: {
    ...mapState(["loading", "eventsData"]),
    calendarData() {
      console.log(this.eventsData); // correct "complete" object
      let data = this.eventsData;
      data.forEach((event, i) => {
        delete event.artist_supporting;
        delete event.genre;
        delete event.venue;
        delete event.venue_city;
        delete event.venue_state;
        delete event.capacity;
        delete event.announce_date;
        delete event.onsale_date;
        delete event.promoter;
        delete event.business_unit;
        delete event.show_type;
        delete event.confirm_date;
        delete event.cancelled_date;
        delete event.status;

        event.venue_id = `event_${i}`;
        event.id = event.venue_id;
        event.title = event.artist_headliner;
        event.startDate = event.event_date;

        delete event.venue_id;
        delete event.artist_headliner;
        delete event.event_date;

        let date = new Date(event.startDate);
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        if (day < 10) {
          day = "0" + day;
        }
        if (month < 10) {
          month = "0" + month;
        }
        event.startDate = year + "-" + month + "-" + day;
      });
      console.log(this.eventsData); // edited object
      return data;
    },
  },

Answer 1

Потому что, выполняя this.localObject = this.storeObject;, вы назначаете ссылку storeObject на localObject, что заставляет обе переменные указывать на одну и ту же память. Мутация одного из них повлияет на другого. Если вам нужно изолировать эффект, вы должны сделать глубокую копию. Самый простой способ - использовать JSON.parse(JSON.stringify(...):

this.localObject = JSON.parse(JSON.stringify(this.storeObject))

Answer 2

Вы должны убедиться, что вы скопировали объект state из магазина, это может быть достигнуто с помощью оператора распространения:

computed: {
  ...mapState(["storeObject"])
}

См. Также документацию здесь .