vue.js - vuex 如何在 obj 属性变化时 watch 到 obj 的变化？

问题描述

问 题

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 中的任意属性改变时就触发某一事件，该如何实现呢？

解决方案

更新

误解你的意思,你是希望能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
        }
    }
}

这篇关于vue.js - vuex 如何在 obj 属性变化时 watch 到 obj 的变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！