前提・実現したいこと
Firebase(Auth, Firestore) + Vue.js + Vuex で簡単なツイフィール のようなものを作ろうとしています。
アカウントを作成し、プロフィールを登録したのち、二度目に編集をしようとしたときに、一度目に登録した内容をv-modelを用いてinput/textareaに表示させたいです。
登録されたプロフィールはFirestoreに保存されているので、マウント時にVuexのストアにあるデータをキーにプロフィールデータを取得しようとしています。
javascript
1// vuejs 単一ファイルコンポーネント内 2... 3 <h1>{{ profileData.username }}</h1> 4... 5data() { 6 return { 7 profileData: { 8 username: "", 9 uid: "" 10 } 11 } 12}, 13mounted() { 14 firebase.firestore().collection("users").doc(this.user.uid).get().then( 15 user => { 16 this.profileData = doc.data().profileData 17 }) 18} 19...
発生している問題・エラーメッセージ
this.user.uid
というのがVuexのStoreに保存しているものなのでマウント時には読み込まれている確証がなくnullになってしまいます。
結果、Firestoreからユーザーデータを取得することができず...。
Teratailにて類似の質問を見つけたのですが、Computedの中でprofileDataを取得しようとするとDuplicate Keyと表示されてしまい動きません。
試したこと
- Computed内でprofileDataの算出
補足情報(FW/ツールのバージョンなど)
- Vue.js
- Vuex
- Vue Router
- Firebase
- Cloud Firestore
初めての質問なので必要な情報など足りない場合はお気軽にコメントください。よろしくお願いします。
(初心者マークを追加しました)
あなたの回答
tips
プレビュー