Vuex Action - 返回 Axios 返回错误

Question

Vuex Action - 返回 Axios 返回错误。

promise 没有返回正确的值，我做错了什么？

有人可以帮助解决这个疑问。

我想在服务器后面显示错误信息。

从现在开始，我非常感谢您的关注。 谢谢。

组件

<q-form
                @submit="onSubmit"
                @reset="onReset"
              >
                <q-input outlined v-model="username" label="User" />
                <br>
                <q-input outlined v-model="password" type="password" label="Pass" />
                <br>
                <q-btn unelevated  type="submit" color="primary full-width" label="Enter" />
              </q-form>

---

    methods: {
...mapActions('auth', ['login']),
onSubmit () {
          this.login({ 'username': this.username, 'password': this.password }).then(obj => {
            console.log(obj)
          }).catch(obj => {
            console.log(obj)
          })
        }
}

---

function login ({ commit, state, getters }, data) {
  return axios.post(`/api/token`, {
    username: data.username,
    password: data.password
  })
    .then(response => {
      commit('setToken', response.data)
    })
    .catch(error => {
      return error
    })
}

POST http://localhost/api/token 400（错误请求）

Answer 1

您需要定义您的函数，而不是直接将其粘贴到方法对象中：

methods: {
  ...mapActions('auth', ['login']),
  myLogin() {
    this.login({ 'username': this.username, 'password': this.password }).then(obj => {
      console.log(obj)
    }).catch(obj => {
      this.error = obj;
    })
  },
}

此外，您正在映射同名的操作：login，因此您需要将本地方法更改为不同的名称，这就是我将其命名为 myLogin 的原因。

创建一个名为error 的data 属性，并在您打算显示错误的组件中使用：{{ error }}。