javascript - 使用 Vuex，当项目是对象数组的一部分时，如何从数组中删除它们？

Question

此处引用现场演示代码:

https://codesandbox.io/s/vue-template-r26tg

假设我有一个包含以下数据的 Vuex 存储:

const store = new Vuex.Store({
  state: {
    categories: [
      {
        name: "Category A",
        items: [{ name: "Item 1" }, { name: "Item 2" }, { name: "Item 3" }]
      },
      {
        name: "Category B",
        items: [{ name: "Item A" }, { name: "Item B" }, { name: "Item C" }]
      },
      {
        name: "Category C",
        items: [{ name: "Item !" }, { name: "Item @" }, { name: "Item #" }]
      }
    ]
  }
});

我有一个 App.vue、Category.vue 和 Item.vue，它们被设置成这样呈现:

//App.vue
<template>
  <div id="app">
    <Category v-for="(category, index) in categories" :category="category" :key="index"/>
  </div>
</template>

<script>
  export default {
    components: { Category },

    computed: {
      ...mapState(["categories"])
    }
  };
</script>

//Category.vue
<template>
  <div class="category">
    <div class="header">{{ category.name }}</div>
    <Item v-for="(item, index) in category.items" :item="item" :key="index"/>
  </div>
</template>

<script>
  export default {
    components: { Item },

    props: {
      category: { type: Object, required: true }
    }
  };
</script>

//Item.vue
<template>
  <div class="item">
    <div class="name">{{ item.name }}</div>
    <div class="delete" @click="onDelete">&#10006;</div>
  </div>
</template>

<script>
  export default {
    props: {
      item: { type: Object, required: true }
    },

    methods: {
      onDelete() {
        this.$store.commit("deleteItem", this.item);
      }
    }
  };
</script>

换句话说，App.vue 从 Vuex 获取类别列表，然后将其作为每个类别的 prop 传递给 Category.vue，然后 Category.vue 将 category.items 作为每个项目的 Prop 传递给 Item.vue。

我需要在单击旁边的删除按钮时删除一个项目:

但是，在 Item.vue 级别，我只能访问 item，而不能访问 category。如果我将 item 发送到 Vuex，我无法判断它属于哪个 category。如何获取对 category 的引用，以便我可以使用 Vuex 从中删除项目？

我可以想到两种方法:

1. 为每个 item 添加父引用回到 category。这是不可取的，不仅因为我必须处理 item 数据，还因为它引入了循环引用，我宁愿不必在应用程序的其他部分处理它。

2. 从 Item.vue 到 Category.vue 发出一个事件，让 Category.vue 处理 Vuex 删除调用.这样类别和要删除的项目都是已知的。

有没有更好的方法来处理这种删除？

Answer 1

我强烈推荐 (2)。通常，如果您可以创建一个组件来获取 props 并发出事件而没有其他副作用(API 调用、Vuex 突变等)，那通常是正确的路径。在这种情况下，您甚至可以将事件一直推送回父级的父级。

共享状态 (Vuex) 真正 有用的地方是当您有两个或更多组件在 DOM 树中彼此远离时。例如。想象一个包含项目总数的标题。您的应用中可能存在这种程度的空间分离，但在这个简单的示例中并不存在。

在此处发出事件的另一个好处是您可以更轻松地使用 storybook 等工具无需处理任何 Vuex 解决方法。