Vuex getter가 저장소 변환으로 새로 고쳐지지 않음

Vuex getter가 저장소 변환으로 새로 고쳐지지 않음

타이프 스크립트로 작성된 VueJs 프로젝트를 상속받았습니다.일부 데이터를 표시하는 컴포넌트가 있습니다.변환(ADD_SHOOL)을 통해 vuex 스토어가 업데이트되지만 변경 내용이 보기에 반영되지 않습니다.감시자가 필요한 것 같습니다만, Vue가 제 가게의 변화에 대응하려면 어떻게 해야 할지 모르겠습니다.

보다

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
});

디폴트 스토어 내보내기

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 Module.t

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;

인덱스.ts

const schoolStore: SchoolStore = new SchoolStore();

export default {
    schoolStore
};

Ackroydd덕분에 저는 View에서 단순히 계산 속성을 사용하여 작업을 할 수 있게 되었습니다.또한 getSchool을 동기화할 수 있었습니다.

갱신된 표시

computed: {
    school() {
         return Stores.schoolStore.getSchool(1, false);
    }
  }
});

발생하고 있는 이 문제에 대해서는, 메뉴얼을 참조해 주세요.반응성 상세

변환 시 어레이 내의 항목을 업데이트하거나 어레이에 새 항목을 추가합니다.Vue는 거스름돈을 받지 않을 것이다.그러기 위해서는, 유저에게Vue.set:

import Vue from 'vue'

...

if(index === -1) {
  Vue.set(state.schools, state.schools.length, school);
} else {
  Vue.set(state.schools, index, school);
}}};

언급URL : https://stackoverflow.com/questions/64446193/vuex-getter-not-refreshing-with-store-mutation