Vuex - 局部变量分配了一个 mapState 值，改变局部变量也会改变存储变量? [英] Vuex - local variable assigned a mapState value, changing local variable also changes store variable?

问题描述

当我将其值赋给局部变量并操作局部值时，为什么我的原始 Vuex 对象会发生变化?如有必要，我可以发布我的 store.js.

Why does my original Vuex object get changed when I assign its value to a local variable and manipulate the local value? I can post my store.js if necessary.

我有这样的事情:

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

这是完整的计算()块.如果我在计算值 calendarData() 的顶部控制台 this.eventsData 它按预期完成.但是如果我在底部控制 this.eventsData ，在返回之前，它会被改变，就像我直接操作它一样.

Here's the complete computed() block. If I console this.eventsData at the top of the computed value calendarData() it's complete as expected. But if I console this.eventsData at the bottom, before the return, it's altered as if I was manipulating it directly.

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;
    },
  },

推荐答案

因为通过执行 this.localObject = this.storeObject; 你将 storeObject 的引用分配给localObject 使两个变量都指向同一个内存.改变它们中的任何一个都会影响另一个.如果需要隔离效果，就得做深拷贝.最简单的方法是使用 JSON.parse(JSON.stringify(...):

Because by doing this.localObject = this.storeObject; you are assigning the reference of storeObject to localObject which makes both variables point to the same memory. Mutating either of them will affect another. If you need to isolate the effect, you have to make a deep copy. The easiest way is to use JSON.parse(JSON.stringify(...):

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

这篇关于Vuex - 局部变量分配了一个 mapState 值，改变局部变量也会改变存储变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！