Categories: Javascript

vuex-module-decoratorsを使っているとERR_STORE_NOT_PROVIDEDが出る件の解消法

@Actionを記載したstoreのメソッドを呼び出そうとしたら下記エラーが出た。
Uncaught (in promise) Error: ERR_STORE_NOT_PROVIDED: To use getModule(), either the module
should be decorated with store in decorator, i.e. @Module({store: store}) or
store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)
さっぱり原因がわからなかったのですがようやく解決できたのでそのメモ。

構成と症状

NuxtとTypescriptによる環境で、ストアに関しては、Nuxtのストアのvuex-module-decorators によるアプローチの構成をそのまま使用していました。
initialiseStoresで@Actionのメソッドを呼び出すことは問題なくできたのですが、page側で呼び出すと本件のエラーが発生しました。
しかし、新規プロジェクトでまっさらに組むとこの問題が発生しないのです。
そのため、別途インストールしたライブラリがなんか悪さしてるのではないかと感じました。

解決方法

私の読みはあたり、nuxt-i18nをmodulesに追加してると本エラーが発生してるようでした。
しかし、ローカライズにも使っているのでこの子を外すわけにもいきません。
はてさてどうしたもんかとドキュメントを漁っていたらvuex: falseというオプションがあることを発見したので、いれてみたら見事解決しました!

nuxt.config.ts抜粋
  i18n: {
    locales: [
      {
        code: 'ja',
        iso: 'ja-JP',
        name: '日本語',
        file: 'ja.json'
      }
    ],
    defaultLocale: 'ja',
    strategy: 'no_prefix',
    lazy: true,
    langDir: 'locales/lang/',
    vueI18n: {
      fallbackLocale: 'ja'
    },
    vueI18nLoader: true,
    vuex: false // ←これいれた
  },

まとめ

おそらくあとからVuexが使われたりすると競合しちゃうんでしょうね。 他のライブラリとかでももしかすると兼ね合いで発生するかもしれないので参考になればと思います。
mogmet

View Comments

  • Your article helped me a lot, is there any more related content? Thanks!

Share
Published by
mogmet