Vuex数据更新,页面不渲染问题

问题场景:
    小程序自定义tabbar中的数据为数组,在vuex中保存,因为消息页有新消息时,需要红点提示,原始版本如下:

state:{
    tabList:[...]
}
setTabbar(state, value){
    state.tabList[0].isDot = true
}



这个时候调用setTabbar,打印出来isDot确实变成true了,但是页面上就是不变
查阅文档发现,数组中的object对象不能直接赋值,需要Vue.set进行赋值,赋值完成页面才能及时渲染
修改后的代码如下:

import Vue from 'vue'
state:{
    tabList:[...]
}
setTabbar(state, value){
    Vue.set(state.tabList[0], 'isDot', true)
}



这个时候isDot的值变化的时候页面就能更新了
问题原因:Vue数组中object对象值更新

暂无评论