Vue js在动作中调用动作

Question

我的 Vuex 商店中有以下操作：

import { HTTP } from '@/services/http'
import router from '@/router'

export const actions = {
  loginUser ({ commit, state }, params) {
    HTTP.post('v1/login.json', { email: params.email, password: params.password })
    .then(response => {
      localStorage.setItem('access_token', response.data.token)
      router.push({name: 'Hello'})
    }).catch(error => {
      commit('SET_LOGIN_ERROR', error.response.data.error)
    })
  },

  myAccount ({ commit }) {
    HTTP.get('v1/my_account.json').headers({'Authorization': ('Token token=' + localStorage.getItem('access_token'))})
    .then(response => {
      commit('SET_USER', response.data)
    })
  }
}

我想myAccount在loginUser成功时启动行动。我怎样才能做到这一点？

我试过这样的事情：

import { HTTP } from '@/services/http'
import router from '@/router'

export const actions = {
  loginUser ({ commit, state }, params) {
    HTTP.post('v1/login.json', { email: params.email, password: params.password })
    .then(response => {
      localStorage.setItem('access_token', response.data.token)
      router.push({name: 'Hello'})
    }).catch(error => {
      commit('SET_LOGIN_ERROR', error.response.data.error)
    })
  },

  myAccount ({ dispatch, commit, state }, payload) {
    dispatch('loginUser', payload)
      .then((res) => {
        console.log('dupa')
        // Do this when loginUser finished
      })
  }
}

但这不起作用......

Answer 1

由于 vue 操作可以是异步的，因此您可以向操作添加调度处理程序，以在完成时调用另一个操作；

export const actions = {
  loginUser ({ commit, state }, params) {
    ... // some http request or what would you like to do
  },

  myAccount ({ dispatch, commit, state }, payload) {
    dispatch('loginUser', payload)
      .then((res) => {
        ...
        // Do this when loginUser finished
      })
  },
}

我正在像这样的项目中进行身份验证，我正在使用 axios 顺便说一句：

loginUser ({ dispatch, commit, state }, payload) {
  let loginData = {
    username: payload.username,
    password: payload.password
  }
  return axios.post(state.url, loginData)
           .then((res) => {
             // You can console.log(res.data) to see if your token data is fine
             window.localStorage.setItem('AuthTokens', JSON.stringify(res.data))
             dispatch('myAccount', { tokens: res.data })
           })
           .catch((err) => {
             // Error handling...
           })
},

myAccount ({ commit, state }, { tokens }) {
  let headerOptions = {
    // Header options with tokens.access_token...
  }
  return axios.get(state.url, headerOptions)
           .then((res) => {
             // You have the user data
             console.log(res.data)
           })
           .catch((err) => {
             // Error handling...
           })
}