Vuex의 "router.currentRoute.name"이 변경되었을 때 계산된 속성 업데이트

Vuex의 "router.currentRoute.name"이 변경되었을 때 계산된 속성 업데이트

마법사 타입의 어플리케이션에 대해 생각해 봅시다.이 어플리케이션에는 "다음 단계로 진행" 버튼이 있습니다.이 버튼은 사용자와의 대화 마지막 단계까지 "다음" 텍스트여야 합니다.

<Button :text="!certainVuexStore.isLastStep ? 'next' : 'finish'" />

각 단계마다 뷰는 Vue-router에 따라 변경됩니다(아래 코드는 TypeScript).

export enum NamedRoutes {
  firstStep = 'FIRST_STEP',
  // ...
  lastStep = 'LAST_STEP'
}

export default new VueRouter({
  routes: [
    {
      name: NamedRoutes.firstStep,
      path: '/',
      component: FirstStepView
    },
    // ...
    {
      name: NamedRoutes.lastStep,
      path: `/${NamedRoutes.lastStep}`,
      component: LastStepView
    }
  ]
});

그래서 계산된 속성은isLastStepvuex 스토어의 경우 다음과 같이 선언할 수 있습니다.

import { VuexModule, Module, Action, getModule } from 'vuex-module-decorators';
import store, { StoreModuleNames } from './Store';
import router, { NamedRoutes } from '@Router/routes';


@Module({ name: StoreModuleNames.common, store, dynamic: true })
export default class Common extends VuexModule {

  public get isLastStep(): boolean {
    return router.currentRoute.name === NamedRoutes.lastStep;
  }

  @Action
  public proceedToNextStep(): void {
    switch (router.currentRoute.name) {
      // Two steps is enough for now
      case NamedRoutes.firstStep: {
        router.push(
            { name: NamedRoutes.lastStep },
            (): void => { console.log(router.currentRoute.name); })
        break;
      }
    }
  }
}

현재의,isLastStep업데이트되지 않습니다.router.push({ name: NamedRoutes.lastStep }실행됩니다.이 질문을 하기 때문에 정확한 원인은 알 수 없지만 다음과 같은 경우가 있습니다.

1. Vuex의 반응성 기능이 경우,router.currentRoute.name.
2. router.currentRoute.name는 Vuex 모듈에 관한 외부입니다.

이 문제의 정확한 원인과 해결 방법은 무엇입니까?

언급URL : https://stackoverflow.com/questions/57285435/make-computed-property-update-when-vuexs-router-currentroute-name-changed