Действие Vuex - Ошибка возврата Axios - PullRequest
Новая
       6

Действие Vuex - Ошибка возврата Axios

1 голос
/ 05 мая 2019

Действие 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 (неверный запрос)

1 Ответ

1 голос
/ 05 мая 2019

Вам нужно определить свою функцию, а не вставлять ее непосредственно в объект методов: 

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 с именем error и используйте: {{ error }} в своем компоненте, где вы намереваетесь показать ошибку.

...