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>

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商店时，它不起作用？

Answer 1

您应该在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()。

我怎样才能在vue.js 2上得到这个。$ store.dispatch的响应？

1 个答案: