Pinia 的 getters 本质是只读的计算属性,设计上禁止修改 state;所有状态变更必须通过 actions 实现,getter 仅负责派生和缓存,保持纯函数特性以确保响应式稳定与调试清晰。

Pinia 的 getters 本质是只读的计算属性,设计上就不支持在 getter 内部修改 state。强行写入不仅无效,还可能破坏响应式、引发警告或静默失败。
为什么不能在 getters 里改状态
Getter 是 Vue computed 的封装,它的作用是「派生」和「缓存」,不是「变更」。Pinia 明确禁止在 getter 函数体内执行 this.xxx = ... 或 state.xxx = ... 这类赋值操作——这既不符合响应式原理,也会让调试变得混乱。
常见错误写法(不要这样):
getters: {
// ❌ 错误:试图在 getter 中修改 state
doubleCount: (state) => {
state.count *= 2 // 直接改 state → 不生效 + 可能报错
return state.count
}
}正确做法:用 actions 封装所有状态变更
所有对 state 的修改,都应统一收口到 actions 中。getter 只负责读、计算、返回,action 负责写、校验、联动。
- 把“需要更新状态”的逻辑从 getter 搬到 action 里
- 组件中通过调用 action 触发变更,再由 getter 自动响应更新
- 保持职责清晰:getter 是「眼睛」,action 是「手」
需要动态计算+触发变更?拆成两步
比如想点击按钮让某个计数翻倍并显示结果,不要试图在 getter 里做这件事:
- ✅ 步骤一:定义 getter 计算当前值(如
doubleCount: (state) => state.count * 2) - ✅ 步骤二:定义 action 执行变更(如
doubleIt() { this.count *= 2 }) - ✅ 组件中先调
store.doubleIt(),模板直接用{{ store.doubleCount }}
避免副作用,守住 getter 的纯函数边界
除了不改 state,getter 还应避开以下行为:
- 不调用 API、不发请求
- 不修改外部变量、不操作 DOM
- 不使用
Date.now()、Math.random()等非响应式依赖 - 不引入异步逻辑(它本身是同步求值的)
保持 getter 纯净,才能享受自动缓存和稳定响应。


















