Vue / Vuex - правильный способ создания и установки элементов магазина из основного объекта

Question

Я новичок в Vue и пытаюсь найти правильный способ взять «главный» объект-хранилище, а затем запустить некоторые функции, чтобы удалить ключи и переименовать другие ключи, а также создать его измененную версию и сохранить ее в сохранить как новый элемент магазина.

Я отправляю действие loadData в created() приложения. js, а затем вызываю локальную функцию prepareData, чтобы взять mapState["eventsData"] и манипулировать им для создания два новых элемента в магазине.

Что происходит, так это то, что объект «master» eventsData изменяется моими функциями. Кроме того, при начальной загрузке страницы this.eventsData (главный объект) консольется как ужасный [__ob__: Observer]. При следующей загрузке страницы у него есть данные, потому что он получает их из localStorage в этот момент.

Приложение. 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);
    },
  },
};

индекс / магазин. 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

Прежде всего, несколько замечаний:

Я отправляю действие loadData в created () приложения. js и затем вызываю локальную функцию prepareData

Нет, это не так. Вызов ax ios является асинхронным, и вам не нужно ждать его завершения sh перед вызовом вашего метода 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 компоненте. Я бы посоветовал перенести этот метод в ваш магазин, чтобы вызвать его в методе then вашего вызова axios. Это упростит задачу, если вы когда-нибудь захотите обновить sh свои данные из другого компонента, и это сделает ваш Vue файл меньше.

Кроме того, я бы посоветовал не использовать ключевое слово delete в качестве также изменит объекты внутри массива eventsData (та же ссылка). Просто воссоздайте объект, используя синтаксис оператора распространения ES6 .

И, наконец, рассматривали ли вы возможность использования vuex getter вместо хранения измененной версии массива eventsData?

Надеюсь, это поможет.