时间戳

首页 > 解决方案 > 我们如何将数据传递给 vuex 动作

javascript - 我们如何将数据传递给 vuex 动作

问题描述

我对 vuex 中的操作不太满意。

我不想在我的登录组件中调用一个使用 axios 进行 api 调用的 vuex 操作。

但是由于我的组件未在操作中接收到而传输的数据..

我不知道如何使这项工作..


this.$store.dispatch('REGISTER', {
          username: this.username,
          email: this.email,
          password: this.password
        })
        .then((response) => {
          console.log(response)
          this.$router.push('/login')
        })
        .catch (() => {
          this.error = true;
        })

在我的 vuex 模块中：


import axios from "axios";

export default {
  state: {},
  mutations: {},
  getters: {},
  actions: {
    REGISTER: ({ username, email, password }) => {
      return new Promise((resolve, reject) => {
        axios
          .post(process.env.VUE_APP_API_URL + "auth/register", {
            username: username,
            email: email,
            password: password
          })
          .then(({ data, status }) => {
            if (status === 201) {
              localStorage.setItem('access_token', data.data.token);
              resolve(true);
            }
          })
          .catch(error => {
            reject(error);
          });
      });
    },
  }
};

谢谢

标签： javascriptvue.jsvuexvuex-modules

解决方案

您正在将一个对象传递给 vuex 操作。尝试修改您的操作方法：

REGISTER: ({ commit }, data) => {
let {username, email, password} = data

编辑：具体来说，任何 vuex 操作接收的第一个参数是一个包含提交、状态、getter 和调度的上下文对象。第二个参数是您通过调用 dispatch 传递给它的任何对象。– maiorano84

推荐阅读