2017-12-21 43 views
5

में कार्रवाई का इंतजार है मैं सोच रहा हूं कि Vuex में एसिंक/प्रतीक्षा कार्यों का उपयोग कैसे करें। docs एक उदाहरण के रूप में इस वाक्य रचना प्रदान करते हैं:एसिंक/Vuex

actions: { 
    async actionA ({ commit }) { 
    commit('gotData', await getData()) 
    }, 
    async actionB ({ dispatch, commit }) { 
    await dispatch('actionA') // wait for `actionA` to finish 
    commit('gotOtherData', await getOtherData()) 
    } 
} 

इस उदाहरण के बाद, मेरे पास है:

import Vue from 'vue'; 
import Vuex from 'vuex'; 
import * as firebase from 'firebase'; 

Vue.use(Vuex); 

export const store = new Vuex.Store({ 
    state: { 
     // other state vars here 
     resource: null 
    }, 
    mutations: { 
     // saveValues 
     setResource(state, payload) { 
      state.resource = payload; 
     } 
    }, 
    actions: { 
     async getResource({ commit, dispatch }) { 
      var resource 
      console.log('resource1: ' + resource) 
      Vue.http.get('https://mysite/api/getResource') 
       .then((response) => { 
        console.log('get resource') 
        var data = response.body; 
        resource = data.access_resource; 
        console.log('resource2: '+ resource) 
        commit('setResource', resource); 
        var foo = store.getters.resource; 
        console.log('resource3: ' + foo); 
       }, (error) => { 
        console.log(error); 
       }); 
     }, 
     async getSomeApi({ commit, dispatch }) { 
      console.log('getting api'); 
      await dispatch('getResource'); 
      var resource = store.getters.resource; 
      console.log('resource4: ' + resource); 
      Vue.http.get('https://somesite/api/someapi?resource=' + resource) 
       .then((response) => { 
        console.log("got something from somesite") 
        var data = response.body; 
        // do something with data -> payload 
        dispatch('saveValues', payload); 
       }, (error) => { 
        console.log(error); 
       }); 
     } 
    }, 
    getters: { 
     resource(state) { 
      return state.resource; 
     } 
    } 
}); 

हालांकि, यहां तक ​​वाक्य रचना उदाहरण डॉक्स में पाया निम्नलिखित, जब मैं इस कोड चलाने के लिए, async/प्रतीक्षा पूरी तरह से अनदेखा प्रतीत होता है। जब मैं लॉग पर नज़र डालें, मैं इस क्रम में देखते हैं,:

  • getting api
  • resource1: undefined
  • resource4: null
  • get resource
  • resource2: <expected-value>
  • resource3: <expected-value>

मैं संख्यात्मक क्रम में मुद्रित करने के लिए console.log कथन की अपेक्षा करता हूं। मैं सराहना करता हूं अगर कोई स्पष्टीकरण दे सकता है कि मैं क्या गलत कर रहा हूं।

उत्तर

5

आप awaitVue.http.get()getResource() विधि में वादा नहीं कर रहे हैं, इसलिए await dispatch('getResource') HTTP अनुरोध को हल करने से पहले हल हो जाएगा।

कांट छांट:

async getResource() { 
    let response 

    try { 
     response = await Vue.http.get('https://mysite/api/getResource') 
    } catch (ex) { 
     // Handle error 
     return 
    } 

    // Handle success 
    const data = response.body 
}