Vue js调用action中的action

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)
    })
  }
}

我希望在loginUser成功时启动myAccount操作。我该怎么做呢？

我尝试过这样的东西：

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

操作接收context对象，因此您可以简单地传递整个对象或将调度添加到解构任务中：

const store = new Vuex.Store({
  actions: {
    foo(context) {
        console.log('foo called');
      },
      bar({dispatch}) {
        setTimeout(() => dispatch('foo'), 1000)
      }
  }
});

这是JSFiddle：https://jsfiddle.net/y1527vxh/

Answer 2

由于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 btw：

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...
           })
}