Vuex - дважды преобразовывать элемент хранилища, фиксировать новые элементы или выполнять преобразования в компонентах при каждом монтировании?

Question

Я хотел бы выполнить два отдельных преобразования одного большого элемента в хранилище и передать результаты обратно в хранилище как два новых дополнительных элемента хранилища. т.е.

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

Я думал, что я должен выполнить преобразования в приложении. js и зафиксировать их в новых элементах магазина, как указано выше, потому что я думаю, что было бы лучше сделать все при загрузке страницы и иметь преобразованные данные читаются в mapState по сравнению с преобразованием при каждом монтировании в компонентах Grid и Calendar. Это веское объяснение?

Я делаю что-то не так, потому что исходное состояние элемента хранилища .ventsData продолжает искажаться где-то по пути во время моих преобразований в локальных копиях. (см. методы transformCalendarData () и transformGridData () ниже. Я не знаю, почему this.eventsData изменяется, или это лучший способ сделать это.

setEventsData mutation and load действие

    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

Это: «Я копирую данные, но оригинал все еще изменяется строками удаления и остальной частью этой функции», вы не можете удалить его, как это, даже если вы копируете данные [{ ссылка }] [1]. Вы можете удалить их вот так const { focus, editable, index, ...rest } = a; , а затем использовать остальные, как хотите. В вашем случае это должно быть так:

const { artist_supporting, genre, venue, venue_city, keep going, ...rest } = event; Затем вы снова можете использовать отдых, как хотите, вы можете вернуть его, поместив в переменную et c ..