用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>

此时在调试工具中

http://img.mukewang.com/szimg/5a9a11f90001d5ae05230213.jpg

<template>
    <div id="banner">
        <div v-for="(item,index) in banner" :key="index">
            <div>{{item}}</div>
        </div>
    </div>
</template>

⌘+S时,仍有数据

刷新页面后,无数据

http://img.mukewang.com/szimg/5a9a12750001017c07230205.jpg

写回答

1回答

ustbhuangyi

2018-02-28

我觉得你应该先根据报错提示解决错误。

0
5
沈墨惜
老师,最新进展,这可能是VUE本身的BUG也说不定,我这是脚手架生成的。computed 里的数据一旦被引用就会无法监听了。不在元素中引用是有数据的,一引用就无法被监听了
2018-03-03
共5条回复

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程