Vue.jsとFirebaseを使用しております。
APIで情報を取得した後、それをFirebase cloud firestoreに保存し、Vuexのstoreも更新するため以下のようなコードを書きました。
以下コードの#3のところでfirestoreを更新したのち、vuexを更新するよう記述しているつもりなのですが、firestoreが更新されておらずvuexの方だけ更新されております。
どこに問題がございますでしょうか??
Promiseについてまだまだ勉強中なのでもし未熟な部分があればご指摘いただければ幸いです。
update(){ var currentUserDoc = db.collection('users').doc(this.currentUser.uid); //UIDが同じドキュメントを代入 let self = this; var now = new Date(); var nowTime = now.getTime(); if(this.checkForm()){ this.loading = true; var sc_client_id = '1234567890'; //SoundCloudのクライアントID var SoundCloudDataArray = []; let promise = new Promise((resolve, reject) => { //////// #1: SoundCloud APIでファイル情報を取得 ///////////// for(var i = 0; i < this.validSoundcloudLinks.length; i++){ var sc_url = this.validSoundcloudLinks[i]; var get_url = 'https://api.soundcloud.com/resolve.json?url=' + sc_url + '&client_id=' + sc_client_id; var xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.onreadystatechange = function() { if( this.readyState == 4 && this.status == 200 ) { if( this.response ) { SoundCloudDataArray.push({url: this.response.uri, title: this.response.title}); } } } xmlHttpRequest.open( 'GET', get_url, true ); xmlHttpRequest.responseType = 'json'; xmlHttpRequest.send( null ); } resolve(); }).then(()=>{ //////// #2:newUserDataにユーザー情報をセット ///////////// this.newUserData = { accountName : this.currentUser.accountName, avatar : this.currentUser.avatar, // ...(中略) uid : this.currentUser.uid, } }).then(()=>{ //////// #3:Cloud Firestoreを更新し、Vuexのstoreを更新 ///////////// currentUserDoc.update(this.newUserData) .then(function(docRef) { self.$store.commit('setCurrentUser', self.newUserData); self.loading = false; self.$router.push({ path: '/mypage' }); }) .catch(function(error) { console.log("Error adding document: ", error); }); }) }else{//バリデーションエラーある時 window.scrollTo(0,0); } },
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。