【Vue.js+Typescript】ビルドは成功するのにVuexの値が出力されない…ぴえん

はじめに

Vue.js+Typescriptでアプリケーションを開発していました。
ローカルサーバーでは問題なく動き、ビルドも成功しました。
ですが、いざ、firebaseでデプロイしようとしたとき、テストサーバーでは全くvuexの値が取れませんでした。
ログを見てもエラーはでていない…なぜだ…

3日間にわたる奮闘記です。

環境

- node v14.16.1
- npm 7.10.0

使用プラグイン

- vue-class-component
- vuex-class-component

• vuex-class-component公式ドキュメント

状況

• ローカル環境：動く。vuexも変数を取得できる。
• ビルド時：エラーなし
• distファイルをローカルでテストしようとしたところ、vuexで定義した変数が出力されない。

ためしたこと

• 出力ファイルのパスが通っているか？
  • index.htmlに定義に出力されたファイルのパスが正しいかを確認した

パスは問題なく通っていた。

解決策

store/index.tsを分割し、モジュール化していたのだが、適切に名前空間の設定ができていなかったらしい。
名前空間を設定し、ビルドしなおしたところ無事動きました！！！！！！やったね！！

store/modules/userstore.ts

 import { createModule, mutation, action, extractVuexModule } from "vuex-class-component";

 const VuexModule = createModule({
+    namespaced: "userStore",
+    strict: false
 })

 export class UserStore extends VuexModule {
    nickname = "nine"

store/index.ts

export const vxm = {
    userStore: createProxy(store, UserStore)
}

views/TestPage.ts

console.log(vxm.userStore.nickname);
// output: nine

ドキュメントをちゃんと読むのは大事ですね

参考

Vue-CLI3でbuildすると画面が真っ白になる
https://qiita.com/heyheyww/items/5d06936745118045a308