问题场景:
小程序自定义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对象值更新