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

操作会收到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...
           })
}

Vue js在行动中调用行动

2 个答案: