Модули магазина Dynami c vuex с Nuxt JS и декораторами vuex-module

Question

Мне трудно заставить мои модули vuex работать с Nuxt JS SSR, TypeScript и vuex-module-decorators.

Я попробовал следовать руководству с официального сайта Nuxt и 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
    }
}

Всякий раз, когда я пытаюсь Доступ к чему-либо в моих модулях, они не определены ...

Я знаю, что этот подход "stati c modules". Моя цель - использовать модули Dynami c, но если модули STATI c являются единственным способом сделать это с Nuxt JS SSR, все будет хорошо.

Любая помощь будет с благодарностью Спасибо:)

Answer 1

боролся с подобной проблемой и заставил ее работать с кодом с этой страницы: https://qiita.com/yoshinbo/items/70f109db7c3de4b4a99f

• используйте хранилище в определении вашего модуля
• экспорт результата getModule из файла вашего модуля
• экспорт по умолчанию createStore из ~ / store / index.ts

Answer 2

Что ж, вам нужно вызвать функцию Message () внутри ловушки созданного жизненного цикла ().

В настоящее время, согласно вашему коду, скрипт начинает выполнение всякий раз, когда компонент инициализируется, но к этому времени хранилище не имеет был настроен, из-за чего было бы разумнее вызывать его внутри хуков жизненного цикла.

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

Надеюсь, это поможет!

Answer 3

То, что вы делаете в файле index.ts, неверно, если вы пытаетесь заставить модули вашего магазина регистрироваться динамически.

Определить пустой магазин в store / index.ts

import Vuex from 'vuex'

export const store = new Vuex.Store<any>({});

Теперь в вашем магазине модули:

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

// import the empty store
import store from '.'

@Module({
  name: 'CommonModule',
  namespaced: true,
  stateFactory: true,

  // add this
  dyamic:true,
  store

})
export default class CommonModule extends VuexModule {
  message: string = 'hi'

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