Using the config panel route, I am fetching data and setting it to local storage using Vuex and StoreJS:
const state = {
message: [],
// console.log(message);
sec: 0,
// other state
};
const getters = {
message: (state) => {
// console.log(this.state.message);
return state.message;
},
sec: (state) => {
return state.sec;
},
// other getters
};
const actions = {
setMessage: ({ commit, state }, inputs) => {
commit(
'SET_MESSAGE',
inputs.map((input) => input.message)
);
return state.message;
},
setSec: ({ commit, state }, newSecVal) => {
commit('SET_TIMEOUT', newSecVal);
return state.sec;
},
// other actions
};
const mutations = {
SET_MESSAGE: (state, newValue) => {
state.message = newValue;
localStorage.setItem('message', JSON.stringify(newValue));
},
SET_TIMEOUT: (state, newSecVal) => {
state.sec = newSecVal;
localStorage.setItem('sec', JSON.stringify(newSecVal));
},
// other mutations
};
export default {
state,
getters,
actions,
mutations,
};
To display this data on the home route, you can access it in the following way:
Retrieving regular state data using MapGetters and implementing it as follows:
computed: {
...mapGetters({
message: "message",
sec: "sec"
}),
If there is no data available, how do I automatically fetch it from local storage when the page reloads?
This is what my mounted function looks like:
mounted() {
this.$store.dispatch("SET_MESSAGE");
this.$store.dispatch("SET_SEC");
},