어떻게 하면 이것에 대한 반응을 얻을 수 있을까.vue.js 2에 $store.properties?

어떻게 하면 이것에 대한 반응을 얻을 수 있을까.vue.js 2에 $store.properties?

내 구성 요소는 다음과 같다.

<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 모듈의 ajax call getProducts 메서

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

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
}

그런 다음 product.js api에서 module callproducts 메서드를 다시 호출한다.

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

실행 시 콘솔에서 확인하지만 응답이 표시되지 않는다.응답이 정의되지 않음

어떻게 하면 오류를 해결할 수 있을까?

갱신하다

다음과 같이 일반 아약스를 사용하는 경우:

<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 스토어를 사용할 때 작동이 안 되는가?

A를 반환해야 한다.Promised당신 안에actions.

시도:

// 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()위로

참조URL: https://stackoverflow.com/questions/42195971/how-can-i-get-response-of-this-store-dispatch-on-the-vue-js-2