[英]How can I get response of this.$store.dispatch on the vue.js 2?
My component is like this : 我的组件是这样的:
<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>
The ajax call getProducts method on the product.js module ajax在product.js模块上调用getProducts方法
The product.js module is like this : 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
}
Then, the module call getProducts method again on the product.js api 然后,模块再次在product.js api上调用getProducts方法
The product.js api is like this : 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)
);
}
}
When executed, I check on the console, the response not show. 执行时,我检查控制台,响应未显示。 The response undefined 响应未定义
How can I solve the error? 我该如何解决错误?
UPDATE UPDATE
If I use normal ajax like this : 如果我像这样使用普通的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>
It works. 有用。 It get the response 它得到了回应
But, Why when I use vuex store, it does not work? 但是,为什么当我使用vuex商店时,它不起作用?
You should return an Promised
in your actions
. 您应该在actions
返回一个Promised
。
Try: 尝试:
// 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)
}
)
})
}
}
or simply, you could just pass return Vue.http.post()
up. 或者简单地说,你可以直接return Vue.http.post()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.