Vuex 将可变对象作为 prop 传递，以传递的对象作为参数调用突变答案

【问题标题】：Vuex pass mutable object as prop, call mutation with the passed object as argumentVuex 将可变对象作为 prop 传递，以传递的对象作为参数调用突变
【发布时间】：2020-09-23 18:09:06
【问题描述】：

假设我有一个 Vuex 状态，其中包含我想在组件中改变的对象数组。我遍历数组并为每个将对象作为道具的对象生成一个组件。在组件内部，我调用 Vuex 突变，并将 Object 作为直接参数传递下来。例如：

父母

<template>
    <ItemComponent
        v-for="(item, index) in items"
        :key="index"
        :index="index"
        :item="item"
    />
</template>

<script>
import ItemComponent from 'ItemComponent.vue';

export default {
    components: {
        ItemComponent
    },
    computed: {
        items() {
            return this.$store.getters.items;
        }
    }
};
</script>

孩子：

<template>

</template>

<script>

export default {
    props: {
        item: {
            type: Object,
            required: true
        }
    },
    methods: {
        changeItemProp() {
            this.$store.dispatch('changeItemXValue', {this.item, 'newValue'});
        }
    }
};
</script>

商店：

// ...
mutations: {
  changeItemXValue(state, { item, value }) {
    item.x = value
  }
}

它有效，是的。但我很确定这是一个反模式，对吧？

// ...
mutations: {
  changeItemXValue(state, { item, value }) {
    state.items.find((i) => i === item).x = value
  }
}

这似乎也好不了多少。

我的问题：如果我想将我的可变数据封装在一个子组件中，这是要走的路，还是这被认为是一种反模式？在这种情况下，我想知道处理这种情况的正确方法是什么。我最初准备 vuex 来处理这种情况，但我不确定这是否是正确的方法。谢谢。

【问题讨论】：

不是将项目本身传递给突变，而是传递项目 ID（例如，它的索引）。然后你的突变可以查找项目（也可能比find 更高效）来设置它的值。

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

嗯，有多种方法可以做到这一点，但我会解释一种推荐的方法。您现在正在做的是，您从商店中获取项目，将它们传递给子组件（通过迭代），然后在突变后进行突变，

// ...
mutations: {
  changeItemXValue(state, { item, value }) {
    state.items.find((i) => i === item).x = value
  }
}

首先，您不需要直接改变这个项目，相反，您应该创建一个操作来为您找到该项目，然后使用项目 ID 或索引来改变它。因此，您需要做的是，创建一个动作，在更改项目的值时，分派该动作，并将项目 ID 甚至项目传递给该动作。在该操作中，找到您要变异的项目，然后提交变异，在您的变异中，只需编写

state.items[itemIndex] = newValue

【讨论】：