vuex 如何在 obj 属性变化时 watch 到 obj 的变化？

Question

app.vue 中：

computed: {
    obj(){
        return this.$store.state.obj;
    },
    id(){
        return this.$store.state.obj.id;
    }
},
watch: {
    id(){
        console.log('idid');
    },
    obj(){
        console.log('objobj');
    }
}

在 vuex 中设置：

const state = {
    obj: {
        id: 1
    }
}
const mutations = {
    updateObj(state, obj){    
        state.obj = obj
    },

    updateId(state, id){
        // Vue.set(state.obj, 'id', id);    
            state.obj.id = id;
    }
    
}

当触发 updateId 试图改变 obj 的 id 属性时，watch 中的 id 会有 Console.log，但 obj 并没有。意味着，改变 obj.id 时，obj 的变化并没有被 watch 到。使用 Vue.set 的方式也是一样。

此外，如果直接打印 {{ obj.id }} 是可以输出正确结果的。但 watch 中就是失效。

如果我想做到当 obj 中的任意属性改变时就触发某一事件，该如何实现呢？

Answer 1

更新误解你的意思,你是希望能watch对象时,属性更新也要触发handler.要用watch的deep属性watch: {     obj: {            deep: true,              handler: function () {                  console.log(123)         }     } }原答案你应该用vuex的getter// getterconst getters = {    obj: state => state.obj}// vue componentsimport { mapGetters } from 'vuex'export default {    // ...    computed: {        // 使用mapGetters        ...mapGetters([            'obj',            // ...        ]),        // 使用store属性        obj () {            return this.$store.getters.obj        }    }}