Javascript 如何在vue.js 2上获得此.store.dispatch的响应?
我的组件如下所示:Javascript 如何在vue.js 2上获得此.store.dispatch的响应?,javascript,vue.js,laravel-5.3,vuejs2,vue-component,Javascript,Vue.js,Laravel 5.3,Vuejs2,Vue Component,我的组件如下所示: <script> export default{ props:['search','category','shop'], ... methods: { getVueItems: function(page) { this.$store.dispatch('getProducts', {q:this.search, cat:this.category,
<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>
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
}
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>
然后,模块在product.js api上再次调用getProducts方法
product.js api如下所示:
<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>
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
}
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>
当执行时,我在控制台上检查,响应不显示。响应未定义
如何解决错误
更新
如果我像这样使用普通ajax:
<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>
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
}
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>
导出默认值{
道具:[“搜索”,“分类”,“商店],
...
方法:{
getVueItems:函数(第页){
const q=this.search
const cat=this.category
const shop=this.shop
这是.http.get('search-result?page='+page+'&q='+q+'&cat='+cat+'&shop'+shop)。然后((响应)=>{
log(JSON.stringify(响应))
this.$set(this'items',response.body.data)
this.$set(this'pagination',response.body)
});
},
...
}
}
它起作用了。它得到了回应
但是,为什么我使用vuex store时,它不起作用?您应该在
操作中返回承诺的
尝试:
或者简单地说,您可以向上传递return Vue.http.post()