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

// getter

const getters = {

    obj: state => state.obj

}

// vue components

import { mapGetters } from 'vuex'

export default {

    // ...

    computed: {

        // 使用mapGetters

        ...mapGetters([

            'obj',

            // ...

        ]),

        // 使用store属性

        obj () {

            return this.$store.getters.obj

        }

    }

}