Vue3+Pinia开发CRUD时，修改/删除数组对象触发readonly报错求助

核心问题分析 #

你遇到的两个警告，本质源于两个错误：

1. 条件判断逻辑错误：findIndex里误用赋值运算符=而非比较运算符===，这会强制把所有数组元素的id改为传入值，直接导致数据混乱。
2. 直接修改只读状态：从Pinia Store解构出的companies是只读代理对象，直接调用splice修改会触发Vue的readonly保护机制。

解决方案 #

方案一：使用 Pinia 的 $patch 方法高效修改 #

$patch支持传入函数直接操作state，既符合Pinia的状态管理规范，又无需替换整个数组，性能高效：

const store = useCompaniesStore()
// 修正findIndex的比较逻辑
const index = store.companies.findIndex(c => c.id === id)
if (index > -1) {
  store.$patch(state => {
    // 在$patch回调内直接操作state数组，避开readonly限制
    state.companies.splice(index, 1, data.data)
  })
}

方案二：在 Store 中定义专门的更新 Action（推荐） #

将状态修改逻辑封装到Store的Action中，更符合Pinia的设计理念，也便于后续维护：

Store 代码：

import { defineStore } from 'pinia'
import type { Company } from './your-types-file'

export const useCompaniesStore = defineStore('companies', () => {
  const companies = ref<Company[]>([])

  // 保留原有的setCompanies方法
  const setCompanies = (newCompanies: Company[]) => {
    companies.value = newCompanies
  }

  // 新增更新单个公司的Action
  const updateCompany = (targetId: number, updatedCompany: Company) => {
    const index = companies.value.findIndex(c => c.id === targetId)
    if (index > -1) {
      companies.value.splice(index, 1, updatedCompany)
    }
  }

  return { companies, setCompanies, updateCompany }
})

组件中调用：

const store = useCompaniesStore()
// 直接调用Action完成更新
store.updateCompany(id, data.data)

关键注意事项 #

• 永远不要在组件中直接修改Pinia Store解构出来的state，必须通过$patch或Action修改。
• 条件判断时务必区分赋值=和比较===，避免意外篡改数据。

内容的提问来源于stack exchange，提问作者Julian Gómez