Vue Pinia如何更新state对象属性？购物车quantity更新失效解决

原代码的问题点 #

• 冗余且错误的$patch调用：你已经直接修改了数组内商品对象的quantity属性，后续传入原数组引用this.cart调用$patch时，Pinia检测到数组的内存引用没有变化，不会触发深层变更的视图更新通知，最终导致页面数据不同步。
• 缺失边界判断：如果find方法没有匹配到对应id的商品，prod会返回undefined，此时直接给prod.quantity赋值会抛出类型错误。
• 刷新后数据重置是Pinia的默认特性：Pinia状态默认存储在浏览器运行内存中，页面刷新会清空运行时内存，所有状态会回到初始值，这部分和你写的更新逻辑无关，需要额外做持久化处理。

正确更新逻辑 #

你可以任选以下两种符合Pinia设计规范的写法：

写法1：直接修改响应式对象（最简洁） #

Pinia默认会对state内的所有数据做响应式代理，直接修改嵌套属性即可自动触发视图更新，不需要额外调用$patch：

state: () => ({
  cart: []
}),
actions: {
  updateQuantityOfProduct(product, val) {
    const targetProd = this.cart.find(item => item.id === product.id)
    // 找不到商品直接终止逻辑，避免报错
    if (!targetProd) return
    targetProd.quantity = val
  }
}

写法2：使用函数形式的$patch（适合批量更新场景） #

如果涉及多个状态的同步修改，推荐用$patch的函数入参形式，Pinia会批量收集变更后统一触发更新，性能更高：

actions: {
  updateQuantityOfProduct(product, val) {
    this.$patch((state) => {
      const targetProd = state.cart.find(item => item.id === product.id)
      if (targetProd) {
        targetProd.quantity = val
      }
    })
  }
}

注意：对象形式的$patch仅适合传入全新引用的状态对象，不要把已经修改过的原state引用直接传入，这种写法无法触发深层变更检测。

刷新后保留购物车数据的实现 #

如果需要页面刷新后购物车修改不丢失，需要做状态持久化：

• 轻量实现无需额外依赖：初始化state时优先读取本地存储，每次更新cart后同步写入localStorage即可

state: () => ({
  // 初始化时读取本地存储的购物车数据，没有则返回空数组
  cart: JSON.parse(localStorage.getItem('shop_cart') || '[]')
}),
actions: {
  updateQuantityOfProduct(product, val) {
    const targetProd = this.cart.find(item => item.id === product.id)
    if (!targetProd) return
    targetProd.quantity = val
    // 变更后同步到本地存储
    localStorage.setItem('shop_cart', JSON.stringify(this.cart))
  },
  // 其他修改cart的action（比如加购、删除商品）也需要同步写入本地存储
}

• 如果项目中需要持久化的状态较多，可以直接使用Pinia生态的持久化插件，无需手动编写存储同步逻辑。

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