Vuexを使用した非同期処理の順番を制御したい

前提・実現したいこと

学習のためにFirebaseとNuxtを使用して、
簡単なアプリケーションを作成しています。

アプリケーションの構成は以下の通りです。

/middleware
 |-- authentication.js
/pages
 |-- list.vue
/store
 |-- auth.js

list.vueのmountedでstateの値を使用したAPI通信を行いたく、
middleware -> action（Firebaseにデータを保存） -> mutationでstateに保存 -> list.vueのmounted()でstateを利用
と実行の順番を同期的に行いたいのですが、
上記を行う方法はありますでしょうか。

ご教授いただけると助かります。
宜しくお願いいたします。

該当のソースコード

middleware/authentication.js

javascript
1import firebase from 'firebase'
2export default function ({ store, redirect }) {
3  firebase.auth().onAuthStateChanged((user) => {
4    if (!user) {
5      redirect('/')
6    } else {
7      store.dispatch('auth/saveUserInfo', {
8        uid: user.uid,
9        name: user.displayName,
10        email: user.email,
11        phoneNumber: user.phoneNumber ? user.phoneNumber : '',
12        photoURL: user.photoURL,
13        isLogin: true
14      })
15    }
16  })
17}
18

store/auth.js

javascript
1import { DB } from '@/plugins/firebase'
2export const state = () => ({
3  uid: '',
4  name: '',
5  email: '',
6  phoneNumber: '',
7  photoURL: '',
8  isLogin: false
9})
10
11export const actions = {
12  saveUserInfo ({ commit }, payload) {
13    DB
14      .ref(`users/${payload.uid}`)
15      .set({
16        uid: payload.uid,
17        name: payload.name,
18        email: payload.email,
19        phoneNumber: payload.phoneNumber,
20        photoURL: payload.photoURL
21      },
22      (error) => {
23        if (!error) {
24          commit('SAVE_USER_INFO', payload)
25        }
26      })
27  }
28}
29
30export const mutations = {
31  SAVE_USER_INFO (state, payload) {
32    state.uid = payload.uid
33    state.name = payload.name
34    state.email = payload.email
35    state.phoneNumber = payload.phoneNumber
36    state.photoURL = payload.photoURL
37    state.isLogin = payload.isLogin
38  }
39}
40

pages/list.vue

vue
1<script>
2import { mapState } from 'vuex'
3import { DB } from '@/plugins/firebase'
4
5export default {
6  middleware: 'authentication',
7  data() {
8    return {
9      articles: {}
10    }
11  },
12  computed: {
13    ...mapState('auth', {
14      uid: 'uid'
15    })
16  },
17  mounted() {
18    DB.ref(`articles/${this.uid}/`)
19      .once('value')
20      .then(snapshot => {
21        this.articles = snapshot.val()
22      })
23  }
24}
25</script>

行動規範の内容に同意します

回答1件

取り急ぎはwatchでuidの値に変更があったときにDB接続するようにしました。

ただやり方がスマートではないですね・・・

javascript
1<script>
2import { mapState } from 'vuex'
3import { DB } from '@/plugins/firebase'
4
5export default {
6  middleware: 'authentication',
7  data() {
8    return {
9      articles: {}
10    }
11  },
12  computed: {
13    ...mapState('auth', {
14      uid: 'uid'
15    })
16  },
17  mounted() {
18    if (this.uid) {
19      this.getMyArticles()
20    }
21  },
22  watch: {
23    uid (newUid) {
24      if (newUid) {
25        this.getMyArticles()
26      }
27    }
28  },
29  methods: {
30    getMyArticles () {
31      DB.ref(`articles/${this.uid}/`)
32        .once('value')
33        .then(snapshot => {
34          this.articles = snapshot.val()
35        })
36    }
37  }
38}
39</script>