用vuex和axios请求异步数据渲染出问题
来源:22-1 课程总结
沈墨惜
2018-02-28
课我没上完,但是目前遇到个棘手的问题,希望老师看到能帮我解答一下。
我用了vuex和axios做数据请求。下面上代码了
store.js中
const state = {
banner: []
}
const mutations = {
GETBANNER(state, res) {
state.banner = res;
console.log(res)
}
}
const actions = {
getBanner({commit}) {
axios.get('/ad/index', {
params: {
bannerTypeId: 1
}
})
.then(function (res) {
commit('GETBANNER', res.data.retData.dataList)
})
.catch(function (error) {
console.log(error);
});
}
}
const getters = {
banner: state => state.banner
}
export default new Vuex.Store({
strict: true,
state,
getters,
mutations,
actions
})组件.vue中的JS
export default {
name: 'banner',
computed: {
banner() {
return this.$store.getters.banner;
}
},
mounted() {
this.$store.dispatch('getBanner')
$('#banner .swiper-slide').height($(window).height())
}
}组件.vue的HTML
<template>
<div id="banner">
<!--<div v-for="(item,index) in banner" :key="index">-->
<!--<div>{{item}}</div>-->
<!--</div>-->
</div>
</template>此时在调试工具中

若
<template>
<div id="banner">
<div v-for="(item,index) in banner" :key="index">
<div>{{item}}</div>
</div>
</div>
</template>⌘+S时,仍有数据
刷新页面后,无数据

写回答
1回答
-
ustbhuangyi
2018-02-28
我觉得你应该先根据报错提示解决错误。
052018-03-03
相似问题