Pinia(Vue状态库)整体替换state对象不生效 如何批量更新状态？

通过getPersonById拿到的thePerson是Pinia状态中存储的响应式对象的直接引用：

• 逐个给属性赋值时，修改的是Pinia托管的原响应式对象本身，所以能正常触发状态同步
• 你试的三种无效写法，本质都是创建了一个全新的普通JS对象，然后把本地变量thePerson的指针指向了这个新对象，全程没有修改Pinia里存的原状态对象，自然不会触发更新

直接把Object.assign的第一个参数换成拿到的原响应式对象即可，不需要逐行写属性赋值：

const thePerson = this.store.getPersonById(this.personId);
Object.assign(thePerson, this.person);

这行代码的效果和你逐行给id_card、name等属性赋值完全一致，会把this.person上的所有可枚举属性批量合并到Pinia的原响应式对象上，自动触发响应式更新。

如果想把更新逻辑收拢到store内部，也可以在store的actions里定义专门的更新方法：

// Pinia模块的actions配置
actions: {
  updatePerson(personId, newData) {
    const targetPerson = this.persons.find(item => item.id === personId);
    if (targetPerson) {
      Object.assign(targetPerson, newData);
    }
  }
}

组件里直接调用action即可：

this.store.updatePerson(this.personId, this.person);

注意不要给Object.assign传空对象作为第一个参数，空对象会生成新的普通对象，断开和Pinia原状态的引用关系，就会回到你之前遇到的不更新问题。

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