Vue.js 登录方法在推送路由之前不等待分派操作完成

在my component UserLogin中，有一个submit按钮调用此方法：

    methods: {
        login() {
          this.$store
            .dispatch("login", {
              email: this.email,
              password: this.password
            })
            //then redirect to default app
            .then(() => {
              console.log("2: router push to main")
              this.$router.push({ name: "main" })
            })
            //error handeling
            .catch(err => {
              this.error = err.response.data.error
            })
        }
      }

发送的登录操作位于my store module user.js中

     actions: {
            login({
                commit
            }, credentials) {
                ChatService.userLogin(credentials)
                    .then(response => {
                        commit('SET_USER_DATA', response)
                        console.log('1 : login dispatch')
                    })
                    .catch(error => {
                        console.log('Error login:', error)
                    })
            }
        },

Chatservice是一种axios api：

    import axios from 'axios'
    import store from "../../store/store"

    let apiClient = axios.create({
        baseURL: `http://127.0.0.1:8080/`,
        withCredentials: false, 
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        }
    }) 

//The interceptor write the server token in Authorization header

    apiClient.interceptors.request.use(function (config) {
        const token = store.getters.token;
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
            console.log(token)
        }
        return config;
    }, function (err) {
        return Promise.reject(err);
    });

    export default {
        // USER AUTHENTICATION
        userLogin(credentials) {
            return apiClient.post('/login', credentials)
        }

我的问题是，当我按下submit按钮时，上面的2个控制台日志按该顺序调用：

2：路由器推送到主服务器 1：登录分派

意思是。然后在我的方法中，在操作完成之前调用。这是一个大问题，因为它试图在我设置userData信息之前推送路由

我怎样才能改变这种行为？

---

非常感谢@Samurai8注意到我必须写一份报税表， 所以

解决了我的问题。

---

在vuex actions的文档中找到它，@Samurai8注意到我必须写一份报税表， 所以

解决了我的问题。

---

在vuex操作文档中找到它

您可以尝试一下。按如下所示的操作路线

actions: {
            login({
                commit
            }, credentials) {
                ChatService.userLogin(credentials)
                    .then(response => {
                        commit('SET_USER_DATA', response)
                        console.log('1 : login dispatch')
                        this.$router.push({ name: "main" })
                    })
                    .catch(error => {
                        console.log('Error login:', error)
                    })
            }
        },

---

您的登录方法将只发送操作，操作将返回承诺。

您可以尝试此操作。按如下所示的操作路线

actions: {
            login({
                commit
            }, credentials) {
                ChatService.userLogin(credentials)
                    .then(response => {
                        commit('SET_USER_DATA', response)
                        console.log('1 : login dispatch')
                        this.$router.push({ name: "main" })
                    })
                    .catch(error => {
                        console.log('Error login:', error)
                    })
            }
        },

---

您的登录方法将只发送操作，而操作将返回承诺。

您的登录操作不会返回任何内容，因此没有什么可等待的？my axios API中的userLogin（credentials）{return apiClient.post（'/login'，credentials）}不是返回了一些内容吗？那我该怎么回去呢？好吧，事实上我看的不是对的。带着你的评论，我重新阅读了文件，找到了他们返回的地方。我必须写一个书面的前台服务。用户登录（凭证）感谢提示！！！您的登录操作没有返回任何内容，因此没有什么可等待的？在我的axios API中，userLogin（凭据）{return apiClient.post（'/login'，credentials）}不是返回了一些内容吗？那我该怎么回去呢？好吧，事实上我看的不是对的。带着你的评论，我重新阅读了文件，找到了他们返回的地方。我必须写一个书面的前台服务。用户登录（凭证）感谢提示！！！