使用Pinia与Vue3比较响应式对象时的数组过滤失败问题排查

问题本质 #

你遇到的不是Pinia的问题，是JavaScript对象引用比较的特性导致的：

• Array.prototype.includes()判断元素是否存在时，对于对象类型，比较的是对象引用是否完全相同，而不是对象内容是否一致。
• 你代码中devStore.character.skills里的{id:1, name:'a'}和devStore.skills里的{id:1, name:'a'}是两个独立的对象实例，内存引用不同，所以includes会返回false，最终过滤逻辑完全失效。

解决方法 #

方法1：通过唯一标识字段比较（推荐） #

放弃对象引用比较，改用对象的唯一标识（比如id）来判断是否为同一个元素，修改过滤逻辑：

const parsed = devStore.skills.filter(skill => 
  !devStore.character.skills.some(charSkill => charSkill.id === skill.id)
);

执行后会得到预期结果：[{id: 2, name: 'b'}]

方法2：复用对象引用 #

如果场景允许，赋值时让两个数组里的相同内容对象复用同一个引用：

onBeforeMount(() => {
  // 先创建共用的skill对象
  const skillA = {id: 1, name: 'a'};
  
  devStore.character = {
    name: 'foo',
    skills: [skillA],
  };

  devStore.skills = [
    skillA, // 复用同一个引用
    {id: 2, name: 'b'},
  ];

  const parsed = devStore.skills.filter(e => !devStore.character.skills.includes(e));
  console.log(parsed); // [{id: 2, name: 'b'}]
});

Pinia相关说明 #

这个问题和Pinia的响应式机制无关，属于JavaScript基础特性。不过Pinia文档中State章节会讲解如何正确处理状态中的对象/数组（比如避免直接替换整个对象的最佳实践），你可以重点关注该章节里关于数组和对象的更新方式，但核心问题还是要理解JS的引用类型比较逻辑。

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