Utilizing vuex-typescript, here is an example of a single store module:
import { getStoreAccessors } from "vuex-typescript";
import Vue from "vue";
import store from "../../store";
import { ActionContext } from "vuex";
class State {
history: Array<object>;
}
const state: State = {
history: [],
};
export const history_ = {
namespaced: true,
getters: {
history: (state: State) => {
return state.history;
},
},
mutations: {
addToHistory (state: State, someob: any) {
state.history.push(someob);
},
resetState: (s: State) => {
const initial = state;
Object.keys(initial).forEach(key => { s[key] = initial[key]; });
},
},
actions: {
addToHistory(context: ActionContext<State, any>, someob: any) {
commitAddToHistory(store, someob);
}
}
const { commit, read, dispatch } =
getStoreAccessors<State, any>("history_");
const mutations = history_.mutations;
const getters = history_.getters;
const actions = history_.actions;
export const commitResetState = commit(mutations.resetState);
export const commitAddToHistory = commit(mutations.addToHistory);
export const getHistory = read(getters.history);
export const dispatchAddToSearchHistory = dispatch(actions.addToHistory);
When using dispatchAddToSearchHistory or commitAddToHistory, all values in the store are consistently overwritten. For instance, after adding an element to the store:
store = [
{
a: 1
}
]
If another object like {b: 2} is added, the store will then appear as:
store = [
{
b: 2
},
{
b: 2
}
]
This pattern continues where each successive entry overrides all previous ones. Adding {c: 3} results in the following store (and so forth):
store = [
{
c: 3
},
{
c: 3
},
{
c: 3
}
]