vue监听store.state中对象的变化不起作用
store.state中的对象属性发生改变,引用state的组件中却监听不到变化,深度监听也不起作用,如下代码:// state.jsnoticeParams: [{ CODE: null, NoticeType: null},{ CODE: null, NoticeType: null},{ CODE: null, NoticeType: null}]// 所引用组件export default
·
store.state中的对象属性发生改变,引用state的组件中却监听不到变化,深度监听也不起作用,如下代码:
// state.js
noticeParams: [
{ CODE: null, NoticeType: null},
{ CODE: null, NoticeType: null},
{ CODE: null, NoticeType: null}
]
// 所引用组件
export default {
methods: {
profileJump(path, tab) {
this.$router.push({ path: path, query: { tab: tab } });
}
},
computed: {
...mapState(['noticeParams'])
},
watch: {
noticeParams(val){
console.log('HomeHeader=====>', val);
}
}
};
// 重新赋值
computed: {
...mapState(['noticeParams'])
},
methods:{
fn(){
// 省略了一些操作
this.$store.commit('setNoticeParams', this.noticeParams)
}
}
// mutations里的方法
setNoticeParams(state, data) {
// 问题就出现在此处
state.noticeParams = data
}
由于重新赋值的代码中里引用了初始 state.noticeParams,而mutations的方法中将改变后的state.noticeParams又重新赋值给state.noticeParams,此时state.noticeParams里的属性值发生了改变但引用并未发生变化,所以监听没起作用,解决方法就是创建新的数组
setNoticeParams(state, data) {
let arr = Object.assign([], state.noticeParams, data);
state.noticeParams = arr
// 创建一个空数组,将初始state.noticeParams与改变后的state.noticeParams==》data合并,最后赋值给state.noticeParams
}
更多推荐
已为社区贡献3条内容
所有评论(0)