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

Answer 2

vue本来就是一个MVVM的框架？有必要使用watch来监听吗？只要在v-model绑定一下，你修改值，值就会变了

Answer 3

你需要把obj return

computed: {
    obj () {
        return this.$store.state.obj
    } 
}