标签：vue-js vue-component vuejs2 javascript laravel-5-3

我的组件是这样的：

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。