質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

1899閲覧

Nuxt.jsでStateを監視したい

sanezane

総合スコア91

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2019/11/17 09:58

Nuxt.jsでのstateの監視について

やりたい処理の内容

  • ユーザ登録を管理するフラグを監視して登録フラグがたったタイミングでログインページに遷移させたい。
  • 掲載しているコードは断片的なのでgithubへあげました。

環境情報

  • Nuxt.js: 2.8.1
  • firebase
  • TypeScript
    • vuex-module-decoratorsにてモジュールの管理をしている

現状

  • 登録処理は完了するのですが画面が遷移してくれない

イメージ説明

  • vue-property-decoratorを使いWatchオプションにて監視するようにしていますがWatch内に入ってきません。

  • サインイン処理にてサインイン処理が終わったことを管理するjobDoneというフラグを監視したいができていない。

  • signup.vueでサインアップ処理を呼ぶ

signup

  • 実際にサインアップをしている箇所(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に入ってきて欲しい。の部分で値が変わっていることは確認済みです。
  • ご指摘があればいただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問