javascript-如何在vue.js 2上获得this.$store.dispatch的响应？

我的组件是这样的：

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

Ajax在product.js模块上调用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上调用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)
        );
    }
}

执行后,我在控制台上检查,未显示响应.响应未定义

我该如何解决错误？

更新

如果我像这样使用普通的ajax：

<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存储时,它不起作用？

解决方法:

您应该在操作中返回一个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()传递出去.

标签：vue-js,vue-component,vuejs2,javascript,laravel-5-3
来源： https://codeday.me/bug/20191026/1935085.html