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
  }
Logo

前往低代码交流专区

更多推荐