如何用 Nuxt 控制 Vuex 的执行顺序

Question

我正在使用 Nuxt、Laravel API 和 FirebaseAuthentication 创建一个餐厅预订应用程序。

我创建了一个喜欢/不喜欢的功能，如果登录用户点击卡片上的心形按钮，心形颜色会变为红色。

该函数有时可以正常工作，但有时在重新加载时在 store/auth.js 中的 getLikes() 处出错。

GET http://localhost:8000/api/v1/users/ 405（不允许的方法）

获取点赞餐厅的API路径是api/v1/likes/{user_id}，bit由于没有存储用户信息，所以按照如下流程获取信息。

1. 获取用户信息。 (api/v1/users/{uid})

2. 获取登录用户喜欢的餐厅列表。 (api/v1/likes/{user_id})

当我查看 Vuex 的执行历史时，执行顺序取决于它是成功还是失败。

成功后，auth/setUserId 的执行速度比 likes/setLikedShops 快。

我认为问题在于 likes/setLikesShops 过程在没有获取用户信息的情况下继续进行，但我没有得到解决方案。

如何确保先获取 user_id 再获取收藏夹？

// plugins/firebase.js
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)

// middleware/auth.js
export default function({store}) {
    store.dispatch('auth/onAuth')
}

// pages/index.vue
async mounted() {
    await this.$store.dispatch('shop/getShops')
    await this.$store.dispatch('likes/getLikes')
    return
}

// store/auth.js
export const state = () => ({
    userId: '',
    userUid: '',
    userEmail: '',
    loggedIn: false,
})

export const mutations = {
    loginStatusChange(state, status) {
        state.loggedIn = status
    },
    setUserUid(state, userUid) {
        state.userUid = userUid
    },
    setUserEmail(state, userEmail) {
        state.userEmail = userEmail
    },
    setUserId(state, userId) {
        state.userId = userId
    }
}

export const actions = {
    login({ commit, dispatch }, payload) {
        firebase
            .auth()
            .signInWithEmailAndPassword(payload.email, payload.password)
        .then(async (result) => {
            const user = result.user
            commit('loginStatusChange', true)
            console.log('Login was successful')
            commit('setUserUid', user.uid)
            commit('setUserEmail', user.email)
            await dispatch('getUserInfo', user.uid)
            await this.$router.push('/')
        })
        .catch((error) => {
            const errorCode = error.code
            console.log('error: ' + errorCode)
        })
    },
    onAuth({ commit, dispatch }) {
        firebase.auth().onAuthStateChanged(async user => {
            user = user ? user : {}
            commit('setUserUid', user.uid)
            commit('setUserEmail', user.email)
            commit('loginStatusChange', user.uid ? true : false)
            await dispatch('getUserInfo', user.uid)
        })
    },
    async getUserInfo({commit}, uid) {
        const data = await axios.get(
            'http://localhost:8000/api/v1/users/'
            + uid
        )
        commit('setUserId', data.data.id)
    }
}

export const getters = {
    isAuthenticated(state) {
        return state.loggedIn != false
    }
}

// store/likes.js
export const state = () => (
    {
        likedShops: [],
        likedShopIds: []
    }
)

export const mutations = {
    setLikedShops(state, shops) {
        state.likedShops.push(...shops)
    },
    setLikedShopIds(state) {
        state.likedShopIds = state.likedShops.map(obj => obj.shop_id)
        console.log('likedShopIds: ' + state.likedShopIds)
    }
}

export const actions = {
    async getLikes({ rootState, commit }) {
        const userUid = await rootState.auth.userUid
        const user = await axios.get(
            `${process.env.baseUrl}/users/${userUid}`
        )
        const userId = await user.data.id
        const result = await axios.get(
            `${process.env.baseUrl}/likes/${userId}`
        )
        await commit('setLikedShops', result.data)
        await commit('setLikedShopIds')
    },
}

export const getters = {
    getLikedShops: (state) => {
        return state.likedShops
    },
    getLikedShopIds: (state) => {
        return state.likedShopIds
    }
}

Answer 1

如果您想确保中间件在继续之前完全准备好，您也应该await store.dispatch('auth/onAuth')。

建议使用async/await 而不是.then（已弃用），因此请尝试在任何地方使用它，不要在它们之间进行奇怪的混合。

另外，即使您的 login 方法应该工作正常，我仍然会尝试将所有 commit 包装到一个操作中，以便您确定它们已正确执行，跟随您等待的调度流程。

您可能应该配置您的axios instance globally，使用runtimeConfig env variables 并从likes.js 文件中删除您的getter，因为您在没有任何修改/格式化/排序/等的情况下访问它们（在此处使用常规状态）。