突变未更新状态

时间:2019-04-30 15:12:24

标签: vue.js vuex

我已提交我的突变,但用户状态未更新,而是返回null

我收到突变数据 axios调用返回用户,但不更新状态

export default new Vuex.Store({
    state: {
        user: null
    },
    getters: {
        getUser: state => {
            return state.user;
        }
    },
    mutations: {
        setUser(state, user) {
            let url = domain + "user";
            axios
                .get(url, {
                    params: {
                        uuid: user.uid
                    }
                })
                .then(res => {
                    Vue.set(state, user, res.data)
                      // tried    state.user = res.data

                })
                .catch(err => {
                    console.log(err);
                });
        }
    },
    actions: {
        setUser(context, user) {
            context.commit('setUser', user);
        }
    }
})

我做错了什么? 谢谢你的帮助

1 个答案:

答案 0 :(得分:1)

每个异步操作都应在一个动作中完成,变异应尽可能简单。在这种情况下,您应该将逻辑从突变转变为行动。像这样:

export default new Vuex.Store({
    state: {
        user: null
    },
    getters: {
        getUser: state => {
            return state.user;
        }
    },
    mutations: {
        setUser(state, user) {
            Vue.set(state, 'user', user)
        }
    },
    actions: {
        getUser(context, user) {
            let url = domain + "user";
            axios.get(url, {
                params: {
                    uuid: user.uid
                }
            }).then(res => {
                context.commit('setUser', res.data)

            }).catch(err => {
                console.log(err);
            });
        }
    }
})