Question

我正在按照本指南使用Vue和Vuex创建登录系统

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

这使登录操作返回了一个承诺，我被告知不遵循Vuex所基于的Flux模式。

因此，我对其进行了一些更改，并执行以下操作：

// 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

将其作为从Promise返回的反模式的想法是一种由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的{{1}}组件中，我们可以定义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)
  }
}

现在在同一个Login组件中，或在任何实际位置中，您都可以定义该方法：

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

现在，我们拥有一个系统，其中的动作是完全异步和分离的，并且我们依靠事件分派和侦听器来对异步动作做出反应。

当然，对于3页的SPA来说，所有这些完全是多余的。

处理Vuex行动结果的实践是什么

1 个答案: