为什么VUEX中的数据被组件元素绑定后就无法被监听了

Question

这个问题因为查找问题的方向变化，已经做了多次修改。问题其实一直都是一个问题，之前的干扰项太多，自己的经验也比较浅。
后来在vue论坛的大神帮助下，问题进展是，发现vuex中的数据，一旦被组件元素绑定，则computed监听失效。项目是VUE脚手架生成的。

下面上代码了

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')
        }
    }

组件.vue的HTML

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

此时在VUE调试工具中可以看到值

若

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

此时不⌘+S
组件有数据，并能正确渲染
刷新页面……

Answer 1

banner这个数据是通过computed计算得来的，同一个数据又是computed又是watch，通常不建议这么做，watch监听是监听一个特定的值发生变化
你在模板里渲染一下banner，就可以了

<li v-for="item in banner.data.retData.dataList">

Answer 2

先在commit('GETBANNER', res)前面输出res看看,检查请求是否有触发，.vue文件data里面不能直接写成items:banner，因为你的items是在watch里面才赋值，如果你的数据是数组可以写成items:[]