Vuex狀態不更新

Question

我試圖根據用戶是否是零售商來呈現不同的UI。 我認為我的一切都是正確的，但是當應用初始化時，我想檢查用戶是否是零售商（這將調度checkAuth操作）。

我嘗試運行以下isRetailer從Firebase獲取isRetailer屬性的值。

firebase.database().ref('/users/' + user.uid + '/isRetailer').once('value').then(snapshot => snapshot.val()

然后我根據結果發送一些動作。 出於某種原因，即使用戶的isRetailer屬性為true，我的Vuex狀態的isRetailer部分也不會從false更新。

我不確定為什么，但我猜它有什么事情要做我的firebase參考。 我的完整代碼如下。 謝謝！

import firebase from 'firebase'

const authentication = {
    state: {
        isAuthed: false,
        authId: '',
        isRetailer: false
    },
    mutations: {
        authUser (state, user) {
            state.isAuthed = true;
            state.authId = user.uid;
        },
        notAuthed (state) {
            state.isAuthed = false;
            state.authId = '';
            state.isRetailer = false
        },
        isRetailer (state) {
            state.isRetailer = true
        },
        isNotRetailer (state) {
            state.isRetailer = false
        }
    },
    actions: {
        checkUser (context, user) {

            if (!user.uid) {

                // Do nothing.

            } else if (firebase.database().ref('/users/' + user.uid + '/isRetailer').once('value').then(snapshot => snapshot.val()) === true) {

                context.commit('authUser', user);

                context.commit('isRetailer');

            } else {

                context.commit('authUser', user);

                context.commit('isNotRetailer');
            };
        },
        signOut (context) {
            context.commit('notAuthed')
        },
        setRetailer (context, payload) {

            // Set retailer info in Firebase.

            var uid = payload.user.uid;
            firebase.database().ref('/users/' + uid).set({
                name: payload.name,
                email: payload.email,
                location: payload.retailerLocation,
                isRetailer: payload.isRetailer
            });  

        },
        setNewUser (context, payload) {

            // Sets a user in firebase w/ a isRetailer value of false. 

            var uid = payload.user.uid;

            firebase.database().ref('/users/' + uid).set({
                name: payload.name,
                email: payload.email,
                isRetailer: payload.isRetailer
            });
        }
    },
    getters: {}
};

export default authentication;

Answer 1

這可能會發生，因為你給變異和狀態變量命名： isRetailer ，我現在沒有任何引用，但這可能是突變不觸發的情況，你可以嘗試一次通過不同的名稱設置你的突變如：

mutations: {
    ...
    ...
    setIsRetailer (state) {
        state.isRetailer = true
    },
    isNotRetailer (state) {
        state.isRetailer = false
    }
},

並在動作中使用它：

actions: {
    checkUser (context, user) {
        ...
        ...

            context.commit('authUser', user);
            context.commit('setIsRetailer');

        }