typescript - Vuex模块装饰器: Access vuex module from this. $store没有注册模块

Question

在我的项目中，我使用 vuex-module-decorators 创建了一个小型 vuex 模块。但是当尝试直接从模板部分的 this.$store 或 $store 访问它时，它不会触发注册。

这是一个例子:

// exampleModule.ts
import { Module, getModule, Mutation, VuexModule } from 'vuex-module-decorators';
import store from '@/store';

@Module({
  dynamic: true,
  namespaced: true,
  name: 'example',
  stateFactory: true,
  store,
})
class Example extends VuexModule {
  private work: boolean = false;

  get isWorking() {
    return this.work;
  }

  @Mutation
  setWorking(status: boolean) {
    this.work = status;
  }
}

export default getModule(Example);

// App.vue
<template>

  <div> 
    first attempt: {{ $store.getters['example/isWorking'] }} // this is not working
    second attempt: {{ isWorking }} // this is not working too
  </div> 
</template>

<script lang="ts">
  import Vue from 'vue';

  export default Vue.extend({
    computed: {
      isWorking() {
        return this.$store.getters['example/isWorking'];
      }
    }
  });
</script>

我实际注册模块并使其工作的唯一方法是将其直接导入到组件中，如下所示:

<script lang="ts">
  import Vue from 'vue';
  import exampleModule from '@/store/modules/example/exampleModule';

  export default Vue.extend({
    computed: {
      isWorking() {
        return exampleModule.isWorking;
      }
    }
  });
</script>

我在这里遗漏了什么吗？这是想要的行为吗？谢谢。

顺便说一句，我在他们的 github 存储库上打开了一个问题，但我仍然没有任何答案，所以我在这里

https://github.com/championswimmer/vuex-module-decorators/issues/190

Answer 1

我无法发表评论，所以我会在这里回答。 您是否将商店导入到 main.js 文件中？ 也许这就是问题所在。 祝你好运!