Vuex - 저장소 항목을 두 번 변환하거나, 새 항목을 커밋하거나, 구성 요소의 변환을 마운트할 때마다 수행하시겠습니까?

Vuex - 저장소 항목을 두 번 변환하거나, 새 항목을 커밋하거나, 구성 요소의 변환을 마운트할 때마다 수행하시겠습니까?

나는 하나의 대형 스토어 아이템을 두 번 분리하여 변환하고 그 결과를 새로운 추가 스토어 아이템 두 개로 다시 스토어에 커밋하고 싶다.

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

내 생각은 App.js에서 변환을 하고 위와 같이 새로운 스토어 아이템에 맡기는 것이 그리드와 캘린더 컴포넌트의 모든 마운트를 변환하는 것보다 페이지 로딩으로 모든 변환 데이터를 읽고 mapState에서 변환 데이터를 읽는 것이 더 나을 것 같아서였다.이것이 좋은 추리인가?

원본 스토어 아이템 state.eventsData가 로컬 복사본에서 변환하는 동안 어딘가에 계속 엉망이 되기 때문에 내가 뭔가 잘못하고 있다.아래 transformCalendarData() 및 transformGridData() 방법을 참조하십시오.나는 왜 이 사건 데이터가 변경되는지, 아니면 이것이 이것을 하는 가장 좋은 방법인지 모르겠다.

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>

이 '데이터를 복사하고 있지만 원본은 여전히 삭제 라인과 그 나머지 함수에 의해 변경되고 있다.' 데이터를 복사하는 한 이 이벤트처럼 삭제할 수 없다. [https://stackoverflow.com/questions/34698905/how-can-i-clone-a-javascript-object-except-for-one-key][1].이렇게 삭제할 수 있다.const { focus, editable, index, ...rest } = a; 그리고 네가 원하는 대로 휴식을 취해라.당신의 경우 다음과 같아야 한다.

const { artist_supporting, genre, venue, venue_city, keep going, ...rest } = event; 그런 다음, 당신은 당신이 원하는 방법으로 그것을 돌려줄 수 있고, 변수에 넣을 수 있는 등의 방법을 사용할 수 있다.

참조URL: https://stackoverflow.com/questions/62807535/vuex-transform-store-item-twice-commit-new-items-or-do-transformations-in-co