Vue / Vuex - 从主对象创建和设置商店项目的正确方法

Question

我对 Vue 有点陌生，并试图找出获取“主”存储对象的正确方法，然后运行一些函数来剥离键并重命名其他键并创建它的更改版本并将其保存到存储中一个新的商店项目。

我在 App.js 的 created() 中调度“loadData”操作，然后调用本地函数“prepareData”以获取 mapState["eventsData"] 并对其进行操作以创建两个新的商店项目。

正在发生的事情是“主”eventsData 对象正在被我的函数更改。 此外，在初始页面加载时，this.eventsData（主要对象）作为可怕的[__ob__: Observer] 控制台。下一页加载它有数据，因为它当时是从 localStorage 获取的。

App.js（prepareData() 只是一个键/值调整函数）。

export default {
  name: "App",
  data() {
    return {
      calendarData: [],
      gridData: [],
    };
  },
  computed: mapState(["eventsData"]),
  created: function () {
    state.commit("initializeStore");
    this.$store.dispatch("loadData"); // this loads then commits "setEventsData"
    this.prepareData();
  },
  methods: {
    prepareData() {
      this.calendarData = this.eventsData.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;
      });
      this.gridData = this.eventsData.forEach((event) => {
        let date = new Date(event.event_date);
        console.log(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("setCalendarData", this.calendarData);
      state.commit("setGridData", this.gridData);
    },
  },
};

index/store.js

 mutations: {
    initializeStore(state) {
      state.eventsData = JSON.parse(localStorage.getItem("eventsData")) || [];
      state.calendarData = JSON.parse(localStorage.getItem("calendarData")) || [];
      state.gridData = JSON.parse(localStorage.getItem("gridData")) || [];
    },
    setEventsData: (state, data) => {
      state.eventsData = data;
      localStorage.setItem("eventsData", JSON.stringify(data));
    },
    setCalendarData: (state, data) => {
      state.calendarData = data;
      localStorage.setItem("calendarData", JSON.stringify(data));
    },
    setGridData: (state, data) => {
      state.gridData = data;
      localStorage.setItem("gridData", JSON.stringify(data));
    },
  actions: {
    loadData({ commit }) {
      axios
        .get("/data/eventsData.json")
        .then((response) => {
          commit("setEventsData", response.data);
          commit("setLoading", false);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

Answer 1

首先，有几点需要注意：

我在 App.js 的 created() 中调度了一个“loadData”动作，然后调用了一个本地函数 'prepareData'

不，你不是。 axios 调用是异步的，在调用 prepareData() 方法之前，您无需等待它完成。如果您需要证明，请使用浏览器开发工具清除本地存储并降低网络速度。你可以这样修复它：

loadData({ commit }) {
    return axios
        .get("/data/eventsData.json")
        .then((response) => {
            commit("setEventsData", response.data);
            commit("setLoading", false);
        })
        .catch((error) => {
            console.log(error);
        });
}

this.$store.dispatch("loadData").then(() => {
    this.prepareData();
});

话虽如此，我不认为你应该在你的 Vue 组件中这样做。我建议将此方法移至您的商店，以便在您的axios 调用的then 方法中调用它。如果您想从另一个组件刷新数据并让您的 Vue 文件更小，这会让事情变得更容易。

另外，我建议不要使用 delete 关键字，因为它也会改变 eventsData 数组中的对象（相同的参考）。只需使用the ES6 spread operator syntax 重新创建一个对象。

最后，您是否考虑过使用 vuex getter 而不是存储 eventsData 数组的修改版本？