Vue js Aufruf Aktion innerhalb Aktion

Question

Ich habe die folgenden Aktionen in meinem Vuex Speicher:

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

ich myAccount Aktion gestartet werden soll, wenn loginUser erfolgreich ist. Wie kann ich das machen?

ich so etwas wie dies versucht haben:

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

aber nicht funktioniert ...

Answer 1

Da vue Aktionen asynchron sein können Sie Dispatch-Handler zu einer Aktion hinzufügen kann es eine andere Aktion zu rufen, wenn erledigt;

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

ich autentication wie dies in meinen Projekten tue, bin ich axios mit 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... 
      }) 
} 

Answer 2

Aktionen erhalten die context Objekt, so dass Sie einfach entweder das gesamte Objekt passieren kann oder fügen Sie Versand an Ihre Destrukturierung Zuordnung:

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

Hier ist der JSFiddle: https://jsfiddle.net/y1527vxh/