如何将数据从 vueJS 传递到 vuex答案

【问题标题】：How can I pass data from vueJS to vuex如何将数据从 vueJS 传递到 vuex
【发布时间】：2017-11-22 16:44:19
【问题描述】：

在这个例子中，我使用 axios 为我获取一些数据，然后我需要传递这些值并将其存储在 Vuex 中

带有axios请求的vue文件：

<script>
    export default {
        data: function () {
            return {
                userData: {},
                login: {
                    username: '',
                    password: '',
                },
            }
        },
        computed: {
            loggedInUser() {
                return this.$store.state.loggedInUser;
            }
        },
        methods: {
            handleLoginFormSubmit() {
                // send axios request to controller and from controller to gRPC
                axios.post('/loginUser', this.login)
                    .then((response) => {
                        this.userData = JSON.parse(response.data[0]);
                    })
                // set loggedInUser info to vuex store
                this.$store.dispatch('loginUser',this.userData);
            }
        },
    }
</script>

当我检查 userData 对象时，我需要的所有信息都在那里现在我有 store.js 文件应该传递该 userData 并将其保存在 Store 但我总是在里面得到空对象

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        loggedInUser: {
            firstName: '',
            lastName: '',
            email: '',
            uuid: '',
        }
    },
    getters: {
        loggedUser(state){
            return state.loggedInUser;
        }
    },
    mutations: {
        loginUser: (state, payload) => {
            state.loggedInUser.firstName = payload;
            state.loggedInUser.lastName = 1;
            state.loggedInUser.email = 1;
            state.loggedInUser.uuid = 1;
        }
    },
    actions: {
        loginUser: (context, payload) => {
            setTimeout(function () {
                console.log(payload);
                context.commit('loginUser', payload)
            }, 3000)
        }
    }
});

我的变异看起来像这样

类型：“登录用户”

有效负载：对象（空）

我哪里做错了？

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

您在数据返回之前调度。将调度移动到回调中。

handleLoginFormSubmit() {
  // send axios request to controller and from controller to gRPC
  axios.post('/loginUser', this.login)
    .then((response) => {
      this.userData = JSON.parse(response.data[0]);
      this.$store.dispatch('loginUser',this.userData);
    })
}

【讨论】：

哇，这么简单......虽然如果我在 axios 之后设置它，它实际上会等到它完成然后继续。谢谢