具有NuxtJS和vuex-module-decorators的动态vuex存储模块

Question

bounty到期在2天内。该问题的答案有资格获得+ 100声望赏金。Atlasmaybe正在寻找来自信誉良好的来源的答案。

我很难使我的vuex模块与NuxtJS SSR，TypeScript和vuex-module-decorators一起使用。

我尝试跟随guide from the official nuxt website和vuex-module-decorators，但无济于事...

这是我的代码：

// store/CommonModule.ts
import { Module, VuexModule, Mutation } from 'vuex-module-decorators'

@Module({
  name: 'CommonModule',
  namespaced: true,
  stateFactory: true,
})
export default class CommonModule extends VuexModule {
  message: string = 'hi'

  @Mutation
  public SET_MESSAGE(val: string) {
    this.message = val
  }
}

// store/index.ts
import Vuex from 'vuex'
import CommonModule from '~/store/CommonModule'

export function createStore() {
  return new Vuex.Store({
    modules: {
      CommonModule,
    },
  })
}

// components/Home.vue
import { Component, Vue } from 'vue-property-decorator';
import { getModule } from 'vuex-module-decorators';
import CommonModule from '~/store/CommonModule'

@Component
export default class Home extends Vue {
    get message(): string {
        const commonModule = getModule(CommonModule, this.$store)
        return commonModule.message // throws an error: Cannot read property 'message' of undefined
    }
}

[每当我尝试访问模块中的任何内容时，这些都是未定义的...

我知道这种方法是“静态模块”。我的目标是使用动态模块，但是如果静态模块是使用NuxtJS SSR进行此工作的唯一方法，那就没问题了。

任何帮助将不胜感激。谢谢：）

Answer 1

嗯，您需要在created（）生命周期挂钩中调用Message（）函数。

当前根据您的代码，脚本将在组件初始化时开始执行，但到那时还没有建立存储，因为在生命周期挂钩中调用它会更有意义。

public created() {
  get message(): string {
    const commonModule = getModule(CommonModule, this.$store)
    return commonModule.message;
  }
}

希望这会有所帮助！

Answer 2

正在解决类似的问题，并使其可以使用此页面上的代码：https://qiita.com/yoshinbo/items/70f109db7c3de4b4a99f

• 在模块定义中使用商店
• 从模块文件中获取getModule的结果
• 从〜/ store / index.ts默认导出createStore