Vuex: Как ждать действия до конца sh?

Question

Я хочу реализовать метод входа в систему. Мой код для этого:

login() {
  let user = {
    email: this.email,
    password: this.password
  };

  this.$store.dispatch('auth/login', user)
  console.log(this.$store.getters['auth/getAuthError'])
},

Где я добираюсь до магазина и отправляю действие входа в систему.

действие в хранилище выглядит следующим образом:

login(vuexContext, user) {
        return axios.post('http://localhost:8000/api/user/login', user)
        .then(res => {
            vuexContext.commit('setToken', res.data.token)
            vuexContext.commit('setUser', res.data, {root: true})
            localStorage.setItem('token', res.data.token)
            Cookie.set('token', res.data.token )
            this.$router.push('/')
        }).catch(err => {
            vuexContext.commit('setAuthError', err.response.data)
        })
    },

В блоке catch, если происходит ошибка, я обновляю состояние и задаю свойству authError полученную ошибку.

Моя проблема в том, что в методе входа в систему оператор console.log выполняется до фактического завершения действия, поэтому свойство authError - это состояние, которое еще не установлено. Как решить эту проблему?

Answer 1

Вы можете использовать asyn c -wait вместо Promise.then . Но я не советую использовать Ax ios в магазине. Вызовите Ax ios внутри метода входа в систему, а затем вызовите хранилище. Примерно так:

methods: {
    async login() {
        try {
            const result = await axios.post('http://localhost:8000/api/user/login', this.user);
            this.$store.dispatch('auth/login', result);
        } catch (err) {
            console.log(err);
        }
    }
}

И тогда вам просто нужно установить Объект в своем магазине.

Answer 2

Ваш action равен , возвращая a promise, чтобы вы могли консоль после того, как обещание было разрешено в блоке then().

login() {
  let user = {
    email: this.email,
    password: this.password
  };

  this.$store.dispatch('auth/login', user).then(() => {
   console.log(this.$store.getters['auth/getAuthError'])
   // this.$router.push('/') // Also, its better to invoke router's method from a component than in a store file, anyway reference of a component may not be defined in the store file till you explicity pass it
  })
},

ИЛИ, вы можете войти async функция & wait для action до обещание , возвращаемое действием, было решено

async login() {
  let user = {
    email: this.email,
    password: this.password
  };

  await this.$store.dispatch('auth/login', user)
  console.log(this.$store.getters['auth/getAuthError'])
},