I've recently taken over a VueJs project that was originally written in typescript. There is a component in the project that is responsible for displaying some specific data. The Vuex store gets updated using a mutation called ADD_SCHOOL but the changes are not being reflected in the view. I believe that I might need to implement a watcher of some sort, but I'm unsure about how to make Vue react to the changes happening in my Store.
View
data() {
return {
school: {} as ISchool
};
},
async mounted() {
await this.getSchoolInformation();
},
methods: {
async getSchoolInformation() {
this.school = await Stores.schoolStore.getSchool(1);
}}}
Store.ts
Vue.use(Vuex);
const modules: ModuleTree<IRootState> = {
schoolStore: schoolModule
};
const store: Store<IRootState> = new Store<IRootState>({
modules
});
export default store;
SchoolStore.ts
export default class SchoolStore {
public async getSchool(id: number, isFirstLoad: boolean): Promise<ISchool> {
return Store.getters[SchoolNamespace + GetterTypes.GET_SCHOOL_FROM_STORE];
}
}
School Modules.ts
export const state: ISchoolState = {
schools: []
};
export const getters: GetterTree<ISchoolState, IRootState> = {
[GetterTypes.GET_SCHOOL_FROM_STORE]: state => {
const storeSchool: ISchool | undefined = state.schools.find(x => x.id === 1);
return storeSchool as ISchool;
}
};
export const mutations: MutationTree<ISchoolState> = {
[MutationTypes.ADD_SCHOOL](state: ISchoolState, school: ISchool): void {
const index: number = state.schools.findIndex(x => x.id === school.id);
if(index === -1) {
state.schools.push(school);
} else {
state.schools.splice(index, 1, school);
}}};
const schoolModule: Module<ISchoolState, IRootState> = {
actions,
getters,
mutations,
namespaced: true,
state
};
export default schoolModule;
Index.ts
const schoolStore: SchoolStore = new SchoolStore();
export default {
schoolStore
};