「NuxtでFirebaseのAuthenticationを使った認証を行う」でつかったプロジェクトのモジュールをアップグレードした際に vuex-class-component
がバージョンアップしていたことではまったので、その内容と解決方法を記録しておきます。
修正内容は以下のリポジトリに反映してあります。
https://github.com/TAC/nuxt-firebase-auth-example
Nuxtを2.9.2にバージョンアップ
「Nuxt を 2.4.0
から 2.9.2
にバージョンアップする」でやった手順をもとにバージョンアップしたところ、以下のエラーが発生するようになりました。
ERROR [Vue warn]: Error in render: "TypeError: Cannot redefine property: user"
当初はどこに問題があるのかわからなかったのですが、調べていくうちに vuex-class-component が1.6.0
から 2.0.4
へ大きくバージョンアップして、使用方法が変わっていることにたどりつきました。
さらに調べた結果、バージョンアップの影響で state
に getter
を付与する方法だと、上記のエラーが出るようになってしまっていたので、該当箇所は以下のように変更しました。
app/src/store/models/users.ts
- @getter user: User | null = null
+ private user: User | null = null
+ get get() {
+ return this.user
+ }
app/src/pages/index.vue
export default class extends Vue {
- @Users.Getter('user') user
+ @Users.Getter('get') user
[追記:2019-10-26]
上記の対応方法を間違えていたようです。初期値に
null
やundefine
を設定していた場合に出るエラーのようでした。以下で訂正します。
- @getter user: User | null = null
+ @getter user: User = {}
get isAuthenticated() {
- return !!this.user
+ return !!this.user.uid
}
@mutation
public UNSET_USER() {
- this.user = null
+ this.user = {}
}
さらなるエラー
これでビルドは通ったのですが、Sign-In Google
のボタンを押下したときに以下のエラーが出るようになりました。
[vuex] unknown local action type: modules/signIn, global type: modules/auth/modules/signIn
どうやらモジュールモードでのパスの設定がうまく行っていないようでした。
該当箇所を以下のように修正することで対応できました。
app/src/store/modules/auth.ts
- @action()
+ @action({ mode: 'raw' })
public async signInGoogle() {
+ const context = getRawActionContext(this)
const provider = new firebase.auth.GoogleAuthProvider()
- await this.signIn(provider)
+ await context.dispatch('signIn', provider)
}
Written with StackEdit.
0 件のコメント:
コメントを投稿