Какова практика обработки результатов действий Vuex?

Question

Я создаю систему входа в систему, используя Vue и Vuex, следуя этому руководству

https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex#toc-setup-components

При этом действие входа в систему возвращает обещание, которое, как мне сказали, не соответствует шаблону потока, на котором основан Vuex.

Итак, я немного изменил его и сделал следующее:

// This is the action from my "auth store"
login: ({commit}, userData) => {
  commit('auth_request')
  Api.post('login', userData)
  .then(res => { 
    const token = res.data.data.token
    localStorage.setItem('token', token)
    Api.defaults.headers.common['Authorization'] = "Bearer " + token
    commit('auth_success', token)
  })
  .catch(err => {
    commit('auth_error')
    console.log("Failed to login, check your username or password")
  })    
}

Это все прекрасно, но когда я нажимаю кнопку входа в приложение, я вижу, что все коммиты проходят, auth_request , auth_success , и магазин заполняется пользователем данные из этого auth_success .

Но так как я теперь не возвращаю обещание, как я могу теперь попросить маршрутизатор изменить представление? У меня нет "обратной связи" о том, когда система завершает загрузку? Какова наилучшая практика для подтверждения успешного или неудачного входа в систему?

Answer 1

Идея о том, что возвращение из Обещания - это не шаблон, была идеологией, основанной на React, которая выдвигала идею Flux.Часть головоломки, которую вам не хватало бы, это dispatcher для прослушивания, когда action наконец-то его называет.

Вы бы слушали это как event listener, что-то вроде `:

this.$flux.on('login', (data) => {
  //login was called here
})

И вы бы отправили это что-то вроде:

this.$flux.emit('login', data)

Идея состоит в том, что вы не полностью зависите от одного компонента архитектуры, который на самом деле может иметь побочные эффекты, илиальтернативно, может фактически представлять изменения по всей вашей системе .

Недостатком этого является то, что вы добавляете еще один уровень управления данными в свое приложение.Вы можете полностью отказаться от этого в небольших приложениях и просто использовать async/await с try/cache и вернуть Promise.resolve/reject.Тем не менее, может быть, вы хотите узнать модель потока.Это очень просто в Vue.

Создайте новый файл с именем bus.js.Внутри этого файла мы фактически просто создадим новый экземпляр Vue и экспортируем его:

import Vue from 'vue'

const Bus = new Vue({})

export default Bus

Теперь мы можем продолжить и импортировать это, скажем, на нашей странице входа в систему:

import Bus from 'bus'

И в нашей функции mounted мы можем добавить слушателя:

Bus.$on('login.success', this.loginHappened)

И в нашем methods в этом Login компоненте мы можем определить loginHappened.

loginHappened (data) {
  console.log(data)
}

Теперь мы просто отправим его из нашего действия:

// store

import Bus from 'bus'

login: async ({ commit }, userData) => {
  try {
    const res = await Api.post('login', userData)

    const token = res.data.data.token
    localStorage.setItem('token', token)
    Api.defaults.headers.common['Authorization'] = "Bearer " + token
    commit('auth_success', token)

    Bus.$emit('login.sucesss', res.data.data)
  } catch (err) {
    Bus.$emit('login.failure', err.response.data)
  }
}

О, вы также захотите посмотреть этот сбой:

Bus.$on('login.failure', this.loginFailed)

И теперь в том же компоненте входа в системуили где угодно, вы можете определить этот метод:

loginFailed (error) {
  console.log(error) // the server side data from axios.
}

Теперь у нас есть система, в которой действия полностью асинхронны и отделены, и мы полагаемся на диспетчеризацию событий и прослушиватели, чтобы реагировать на асинхронные действия.

Конечно, это все излишне для SPA на 3 страницы.