web-dev-qa-db-ja.com

NuxtJSとvuex-module-decoratorsを使用した動的なvuexストアモジュール

私のvuexモジュールをNuxtJS SSR、TypeScript、およびvuex-module-decoratorsで動作させるのに苦労しています。

公式のnuxt Webサイトからのガイド と 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で動作させる唯一の方法である場合は問題ありません。

どんな助けでも大歓迎です。ありがとう:)

[〜＃〜]編集[〜＃〜]
私はあきらめて使用しました vuex-class-component

typescriptvue.jsvuexnuxt.js
3
Atlasmaybe

ストアモジュールを動的に登録しようとすると、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
  }
}
1
Elton Lobo

まあ、created（）ライフサイクルフック内でMessage（）関数を呼び出す必要があります。

現在、コードによると、コンポーネントがInitialiseになるとスクリプトが実行を開始しますが、ライフサイクルフック内で呼び出すことにより、ストアがセットアップされていないため、ライフサイクルフック内で呼び出す方が理にかなっています。

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

お役に立てれば！

1
Varit J Patel