javascript - 如何将数据从 vueJS 传递到 vuex

Question

在这个例子中，我使用 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)
        }
    }
});

我的突变看起来像这样

type:"loginUser"

payload:Object (empty)

我哪里做错了？

Answer 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);
    })
}