LoginSignup
0
0

More than 3 years have passed since last update.

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

Posted at

はじめに

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

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

環境

- node v14.16.1
- npm 7.10.0

使用プラグイン

- vue-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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0