Question

Vuex操作-返回Axios返回错误。

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

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

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

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

组件

<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对象中：

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。

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

Vuex操作-返回Axios返回错误

1 个答案: