Vuex状态不更新

Question

I am trying to render different UIs depending on whether a user is a retailer or not. I think I have mostly everything correct, but when the app initializes, I want to check whether the user is a retailer or not (This dispatches the checkAuth action).

I try running the following to get the value of the isRetailer property from Firebase.

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

Then I dispatch some actions based on the result. For some reason, the isRetailer part of my Vuex state is not updating from false even when the users isRetailer property is true.

I'm not really sure why but I'm guessing it has something to do w/ my firebase reference. My full code is below. Thanks!

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

This might be happening because you have given same name to mutation and state variable: isRetailer , I don't have any reference right now, but this might be the case for mutation not triggering, You can try once by setting your mutation by different name such as:

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

and use this in actions:

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

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

        }