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()方法。如果需要证明，请清除您的localStorage并使用浏览器开发工具来降低网络速度。您可以这样修复它：

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组件中执行此操作。我建议将此方法移到您的商店中，以在您的then调用的axios方法中进行调用。如果您想从另一个组件刷新数据并保持Vue文件更小，那将使事情变得更容易。

此外，我建议不要使用delete关键字，因为也会使eventsData数组内的对象发生突变（相同的引用）。只需使用the ES6 spread operator syntax重新创建一个对象。

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

希望有帮助。

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

1 个答案: