vue监听store.state中对象的变化不起作用_vue 监听不到store的变化-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39085895/article/details/118154959

本文探讨了在 Vue 应用中，当使用 Vuex 的 state 并尝试监听其对象属性变化时遇到的监听失效问题。具体表现为在 mutations 中通过赋值方式更新 state 的对象属性，由于引用不变导致组件无法侦测到变化。为解决这个问题，提出了通过深拷贝创建新数组来确保 state 的引用变化，从而触发组件的监听更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
  }