Nuxt.jsでのstateの監視について
やりたい処理の内容
- ユーザ登録を管理するフラグを監視して登録フラグがたったタイミングでログインページに遷移させたい。
- 掲載しているコードは断片的なのでgithubへあげました。
環境情報
- Nuxt.js: 2.8.1
- firebase
- TypeScript
- vuex-module-decoratorsにてモジュールの管理をしている
現状
- 登録処理は完了するのですが画面が遷移してくれない
-
vue-property-decorator
を使いWatchオプションにて監視するようにしていますがWatch内に入ってきません。 -
サインイン処理にてサインイン処理が終わったことを管理する
jobDone
というフラグを監視したいができていない。 -
signup.vueでサインアップ処理を呼ぶ
signup
1async onSignUp(signUpData) { 2 // storeで定義したsignUpUserアクションにdispatch 3 await userInfoModule.signUpUser(signUpData) // signUpUserの中でユーザ登録をして完了したタイミングでフラグが立つことは確認済み 4 /** ログインステータスの確認 */ 5 if (CommonModule.getJobDone) { // 6 this.removeErrors() 7 this.$router.replace('/login') 8 } 9 } 10 @Watch('CommonModule.jobDone') jobDoneというのは共通のStateへ定義 11 jobWatch() { 12 alert('jobWatch入りました') // 入ってこない 13 if (CommonModule.getJobDone) { 14 // CommonModule.setJobDone(true) 15 this.removeErrors() 16 this.$router.replace('/login') 17 } 18 }
- 実際にサインアップをしている箇所(UserInfo.ts)
UserInfo
1@Action({}) 2 signUpUser(payload) { 3 Common.CommonModule.setBusy(true) 4 Common.CommonModule.clearError() 5 let newUser = null 6 const db = fireApp.firestore() 7 fireApp 8 .auth() 9 .createUserWithEmailAndPassword(payload.email, payload.password) 10 .then((response) => { 11 newUser = response.user 12 return response.user 13 .updateProfile({ displayName: payload.displayName }) 14 .then(() => { 15 const authUser = { 16 id: response.user.uid, 17 email: response.user.email, 18 name: response.user.displayName 19 } 20 // サインアップ処理の終了をmutationsに伝える 21 this.setId(authUser.id) 22 this.setEmail(authUser.email) 23 this.setName(authUser.name) 24 Common.CommonModule.setJobDone(true) 'このタイミングで@Watchに入ってきて欲しい。' 25 Common.CommonModule.setBusy(false) 26 }) 27 }) 28 .catch((error) => { 29 Common.CommonModule.setBusy(false) 30 Common.CommonModule.setError(error) 31 }) 32 .then(() => { 33 const userRef = db.collection('users').doc(newUser.uid) 34 return userRef.set({ 35 email: payload.email, 36 name: payload.displayName, 37 createdAt: new Date().toISOString() 38 }) 39 }) 40 .catch((error) => { 41 Common.CommonModule.setBusy(false) 42 Common.CommonModule.setError(error) 43 }) 44 }
- 上記の
//このタイミングで@Watchに入ってきて欲しい。
の部分で値が変わっていることは確認済みです。 - ご指摘があればいただけると幸いです。
あなたの回答
tips
プレビュー