Question

我遇到登录后商店数据“菜单”未更新的问题。出乎意料..在我调用“getMenus”之前，对象“loggedInUser”没有坐过。我不确定我在这里做错了什么......

PS！在chrome中调试时，我注意到在输入api调用时loggedInUser为“null”（请参阅api.js codesnippet）。

Login.vue（方法）：

methods: {
    doLogin() {
        this.errorMessage = '';
        this.loading = true;
        let userCredentials = {
            'username': this.loginEmail,
            'password': this.loginPassword
        };

        this.$store.dispatch('tryLogin', {
            'login': this.loginEmail,
            'password': this.loginPassword
        }).then((response) => { 
            this.$store.dispatch('getMenus')
                .then((response) => {
                    this.$router.push('/')
            });
        });
    }

}，

Menus.vue（与/相同）

 computed: {
    menus() {
        return this.$store.getters.menus
    }
    },
    created() {
        this.$store.dispatch('getMenus')
    },
methods: {
    viewMenu: function(item) {
        console.log("=> View Menu : " + item.Name)
        this.$router.push('/viewmenu/' + item.Id)
    }
    }
}

store.js（getMenus action AND tryLogin）

actions: {
    getMenus({ commit, getters }) {
        api.getMenus(getters.loggedInUser)
            .then(menus => {
                commit('UPDATE_MENUS', menus);
            });
    },
    tryLogin({ commit }, credentials) {
        api.tryLogin(credentials)
        .then(loggedInUser => {
            commit('LOGGED_IN_USER', loggedInUser);
        });
    },

api.js（getMenus功能）

getMenus(loggedInUser) {
    var hostname = 'http://myurl'

    var config = {
        headers: {
            'Content-Type': 'application/json'
        }
    }
    var endpointUrl = hostname + '/api/Menu/GetMenus';

    if (loggedInUser != null){
        endpointUrl = hostname + '/api/Menu/GetMenusForSubCompany/' + loggedInUser.encryptedsubcompanyid;
    }

    return axios.get(endpointUrl, config)
        .then(response => response.data);
},

Answer 1

从您的store.js代码段中，您似乎忘了回复承诺。

VUE：登录后更新商店数据

1 个答案: