Vue3 + Pinia：如何正确从Store数组中删除元素？

1. 正确访问Pinia Store中的数组 #

你的代码存在两处错误：重复调用useStore()、未正确解构响应式状态。正确写法如下：

// 组件内代码
const store = useStore() // 仅调用一次获取Store实例
const { myarray } = storeToRefs(store) // 解构出响应式的数组状态

说明：

• Pinia的状态必须通过storeToRefs解构，才能在组件中保持响应式；直接赋值myarray = store.myarray会丢失响应性。
• 务必复用同一个Store实例，不要重复调用useStore()。

2. 正确从数组中删除指定条目 #

你的删除方法参数与组件传递的内容不匹配，逻辑也存在错误，修正步骤如下：

第一步：修正组件中的循环与点击事件 #

注意v-for的正确语法（使用圆括号而非花括号），并添加唯一key：

<div v-for="(el, index) in myarray" :key="el.name">
  <button @click="store.remove(el)">删除</button>
</div>

推荐用元素的唯一标识（如el.name）作为key，比index更稳定，可避免渲染异常。

第二步：修正Pinia Store中的remove方法 #

// Pinia Store中的方法
remove(targetItem) {
  // 通过唯一属性（如name）过滤数组，移除目标元素
  this.myarray = this.myarray.filter(item => item.name !== targetItem.name)
}

说明：

• 直接对this.myarray重新赋值过滤后的数组，Pinia会自动跟踪状态变化并更新组件。
• 用元素的唯一属性（如name）判断匹配，比直接比较对象引用更可靠，可避免因引用不一致导致的删除失败。

内容的提问来源于stack exchange，提问作者Fred