Question

考虑向导类型的应用程序；它具有“进入下一步”按钮，该文本应为“下一步”，直到与用户进行交互的最后一步为止。

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

因此，可以将vuex存储的计算属性isLastStep声明为：

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 }。因为我问这个问题，所以我不确切知道原因，但是可能是：

Vuex的反应性功能。它不会监视router.currentRoute.name。
router.currentRoute.name对于Vuex模块是外部的。

确切原因是什么，我该如何解决？

当Vuex的“ router.currentRoute.name”更改时，使计算的属性更新

0 个答案: