小编Lia*_*rth的帖子

我已经在 Vuex 应用程序中标准化了我的数据，但我无法找到有关如何查看数据更改的答案。例如，这是我设置的简化版本。

状态：

const state = {
    shapes: {
        collection: [1, 2, 3],

        data: {
            1: {
                type: 'circle',
                isActive: false,
            },
        },
    }
}

吸气剂：

const getters = {
    findShape: (state) => (id) => {
        return state.shapes.data[id];
    }

    allShapes: (state, getters) => {
        return state.shapes.collection.map(id => getters.findShape(id));
    }
}

在我的组件中，我在计算属性中调用 allShapes getter 并通过 v-for 将形状传递给子组件。

computed: {
    shapes() {
        return this.$store.getters.allShapes;
    }
}

添加和删​​除形状工作正常。问题是每当我更新数据对象中的属性时，更改都不会反映在我的组件中。这是我设置 isActive 属性的突变：

const mutations = {
    setActive(state, shape) {
        Vue.set(state.shapes.data[shape.id], 'isActive', shape.isActive);
    }
} …