解决computed监听Vuex中state对象中的对象属性时不生效的问题

       computed属性监听对象时候,若对象的引用地址未改变,那么computed将不会检测到。(比如object中的某个key对应的value发生了变化,computed检测不出来)

原写法

export default {
    namespaced: true,
    state: {
        shareInformation:{
             other: {}//获取时为Null
             ...
        }
    },
    mutations: {
        addInformation(state,info){
            let data = Object.assign(state.shareInformation,info);
            //此时state.shareInformation的值改变了,但是引用地址没变
            state.shareInformation = data;
        },
    }
}

正确写法

export default {
    namespaced: true,
    state: {
        shareInformation:{
            other: {}
            ...
        }
    },
    mutations: {
        addInformation(state,info){
            //创建一个新的对象,将state.shareInformation,Info,对象复制到新对象中
            let data = Object.assign({},state.shareInformation,info);
            //将state.shareInformation指向新对象的引用地址
            state.shareInformation = data;
        },
    }
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 组件监听 Vuex 状态(state)的改变,可以使用 Vuex 提供的 `mapState` 辅助函数或者直接使用 Vuex 的 `watch` API。 方法一:使用 `mapState` 辅助函数 1. 首先,在组件的 `computed` 属性导入 `mapState` 辅助函数: ```javascript import { mapState } from 'vuex' ``` 2. 然后,在 `computed` 属性使用 `mapState` 辅助函数来将 Vuex 的状态映射为组件的计算属性: ```javascript export default { computed: { ...mapState(['myState']) // 将名为 "myState" 的状态映射为组件的计算属性 } } ``` 3. 最后,在模板使用映射后的计算属性来访问状态: ```html <template> <div> <p>{{ myState }}</p> </div> </template> ``` 这样,当 Vuex 的 `myState` 发生变化,组件的计算属性 `myState` 会自动更新,从而实现对状态变化的监听。 方法二:使用 `watch` API 1. 首先,在组件的 `watch` 属性监听 Vuex 的状态: ```javascript export default { watch: { '$store.state.myState': function(newVal, oldVal) { // 处理状态变化的逻辑 } } } ``` 2. 在上述代码,`'$store.state.myState'` 是需要监听Vuex 状态路径,当该状态发生变化,会执行相应的回调函数。 这样,当 Vuex 的 `myState` 发生变化,`watch` 的回调函数会被调用,从而实现对状态变化的监听。 无论是使用 `mapState` 还是 `watch`,都能够实现对 Vuex 状态的监听,你可以根据具体情况选择适合的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值