As a newcomer to Vue, I am exploring the best approach to manipulate a "master" store object by stripping keys, renaming others, and creating an altered version to save as a new store item.
In my App.js file, I initiate a "loadData" action within the created() lifecycle hook and then call a local function 'prepareData' to modify the mapState["eventsData"] and generate two new store items.
The issue I'm encountering is that the original "master" eventsData object is being altered by my functions. Additionally, upon the initial page load, this.eventsData (the main object) is displayed as [__ob__: Observer], only showing the data on subsequent loads when pulled from localStorage.
App.js (prepareData() method involves adjusting key/value pairs).
export default {
name: "App",
data() {
return {
calendarData: [],
gridData: [],
};
},
computed: mapState(["eventsData"]),
created: function () {
state.commit("initializeStore");
this.$store.dispatch("loadData"); // Fetches data and commits "setEventsData"
this.prepareData();
},
methods: {
prepareData() {
this.calendarData = this.eventsData.forEach((event, i) => {
delete event.artist_supporting;
delete event.genre;
// Additional key manipulations...
});
this.gridData = this.eventsData.forEach((event) => {
// Additional key manipulations...
});
state.commit("setCalendarData", this.calendarData);
state.commit("setGridData", this.gridData);
},
},
};
index/store.js
mutations: {
initializeStore(state) {
// Retrieves data from localStorage or sets to empty array
},
setEventsData: (state, data) => {
// Sets eventsData in state and updates localStorage
},
// Additional mutation methods...
actions: {
loadData({ commit }) {
// Fetches data from external source and updates store
},
},