VUEX-Transform存储项目两次，提交新项目，还是每次安装都在组件中进行转换？

Question

我想对单个大型存储项进行两个单独的转换，并将结果作为两个新的附加存储项提交回存储。即。

setEventsData: (state, data) => {...} // main huge master object
// do transformations on it then 
setGridData: (state, transformedEventsData) => {}
setCalendarData: (state, differentTransformedEventsData) => {}

我的想法是，我应该在app.js中进行转换，并将这些转换提交到新的存储项中，如上所示，因为我认为最好在页面加载时完成所有的转换，并在mapState中读取转换后的数据，而不是每次挂载到网格和日历组件中进行转换。这是好的推理吗？

我做错了，因为在转换本地副本的过程中，原始store项State.EventsData在某个地方不断被损坏。（请参阅下面的transformCalendarData（）和transformGridData（）方法。我不知道为什么会修改EventsData，或者这是否是最好的方法。

setEventsData突变和加载操作

    mutations: {
      setEventsData: (state, data) => {
        state.eventsData = data;
        localStorage.setItem("eventsData", JSON.stringify(data));
      },
    }
    loadData({ commit }) {
      axios
        .get("/data/eventsData.json")
        .then((response) => {
          commit("setEventsData", response.data);
          commit("setLoading", false);
        })
        .catch((error) => {
          console.log(error);
        });
    },

应用程序JS

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import state from "./store/index";
import { mapState } from "vuex";

export default {
  name: "App",
  data() {
    return {
      calendarData: [],
      gridData: [],
    };
  },
  computed: mapState(["loading", "eventsData"]),
  beforeCreate() {
    state.commit("initializeStore");
  },
  created: function () {
    this.$store.dispatch("loadData");
    this.gridData = this.eventsData;
    this.calendarData = this.eventsData;
  },
  mounted() {
    this.transformDataForGrid();
    this.transformDataForCalendar();
  },
  methods: {
    transformDataForCalendar() {
      this.calendarData.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;
      });
      state.commit("setCalendarData", this.calendarData);
    },
    transformDataForGrid() {
      this.gridData.forEach((event) => {
        let date = new Date(event.event_date);
        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.event_date = year + "-" + month + "-" + day;
      });
      state.commit("setGridData", this.gridData);
    },
  },
};
</script>

Answer 1

“我正在复制数据，但原始数据仍然被删除行和该函数的其余部分所改变”，即使复制了数据，也不能像这样删除它[https://stackoverflow.com/questions/34698905/how-can-i-clone-a-javascript-object-except-for-one-key][1]。您可以像下面这样删除它们：const{focus,editable,index,...rest}=a；然后根据需要使用rest。在您的情况下，它应该像:

const{artist_supporting,genre,venue,venue_city,keep going,...rest}=事件；然后，您可以根据需要使用rest返回它，将它放入一个变量中，等等。