어떻게하면 vue.js 2에서 $ store.dispatch의 응답을받을 수 있습니까?

Question

내 성분이 같다 :

<script> 
    export default{ 
     props:['search','category','shop'], 
     ... 

     methods: { 
      getVueItems: function(page) { 
       this.$store.dispatch('getProducts', {q:this.search, cat:this.category, shop: this.shop, page:page}).then(response => { 
        console.log(response) 
        this.$set(this, 'items', response.body.data) 
        this.$set(this, 'pagination', response.body) 
       }, error => { 
        console.error("this is error") 
       }) 
      }, 
      ... 
     } 
    } 
</script> 

product.js 모듈은 다음과 같이 인 product.js 모듈

에 AJAX 호 getProducts 방법 : 다음

import { set } from 'vue' 
import product from '../../api/product' 
import * as types from '../mutation-types' 

// initial state 
const state = { 
    list: {} 
} 

// actions 
const actions = { 
    getProducts ({ commit,state }, payload) 
    { 
     product.getProducts(payload, 
      data => { 
       let products = data 
       commit(types.GET_PRODUCTS,{ products }); 
      }, 
      errors => { 
       console.log('error load products ') 
      } 
     ) 
    } 
} 

// mutations 
const mutations = { 
    [types.GET_PRODUCTS] (state, { products }) { 
     state.list = {} 
     products.data.forEach(message => { 
      set(state.list, message.id, message) 
     }) 
    } 
} 

export default { 
    state, 
    actions, 
    mutations 
} 

모듈 제품의 getProducts 메소드를 다시 호출하십시오.

product.js api는 다음과 같습니다.

import Vue from 'vue' 
import Resource from 'vue-resource' 

Vue.use(Resource) 

export default { 
    // api to get filtered products 
    getProducts (filter, cb, ecb = null) { 
     Vue.http.post(window.Laravel.baseUrl+'/search-result',filter) 
      .then(
      (resp) => cb(resp.data), 
      (resp) => ecb(resp.data) 
     ); 
    } 
} 

실행하면 콘솔이 표시되고 응답이 표시되지 않습니다. 응답이 정의되지 않았습니다.

어떻게 해결할 수 있습니까?

UPDATE

이 같은 정상 아약스 사용하는 경우 : 그것은 작동

<script> 
    export default{ 
     props:['search','category','shop'], 
     ... 

     methods: { 
      getVueItems: function(page) { 
       const q = this.search 
       const cat = this.category 
       const shop = this.shop 
       this.$http.get('search-result?page='+page+'&q='+q+'&cat='+cat+'&shop'+shop).then((response) => { 
        console.log(JSON.stringify(response)) 
        this.$set(this, 'items', response.body.data) 
        this.$set(this, 'pagination', response.body) 
       }); 
      }, 
      ... 
     } 
    } 
</script> 

합니다. 응답을 얻습니다.

하지만, 왜 vuex 저장소를 사용할 때 작동하지 않습니까?

Answer 1

actions에 Promised을 돌려 보내야합니다.

시도 :

// actions 
const actions = { 
    getProducts ({ commit,state }, payload) 
    { 
     return new Promise((resolve, reject) => { 
      product.getProducts(payload, 
       data => { 
        let products = data 
        commit(types.GET_PRODUCTS,{ products }); 
        resolve(data) 
       }, 
       errors => { 
        console.log('error load products ') 
        reject(errors) 
       } 
      ) 
     }) 
    } 
} 

하거나, 당신은 단지 return Vue.http.post() 최대를 전달할 수 있습니다.