响应式状态管理：Pinia 如何利用 Vue 3 的响应式 API？-Vue.js-PHP中文网

Pinia 的响应式能力直接基于 Vue 3 的 reactivity 系统，state 是 reactive 对象或 ref，getters 本质是 computed，actions 中修改 state 会自动触发更新，跨组件共享时响应性不丢失，无需映射工具且 TypeScript 类型推导精准。

响应式状态管理：pinia 如何利用 vue 3 的响应式 api？

Pinia 的响应式能力不是自己实现的，而是直接依托 Vue 3 的 reactivity 系统——它不封装、不代理、不重写，只是“用好” ref、reactive、computed 这些原生 API。这意味着 Pinia 中的状态更新会自动触发视图刷新，和你在 setup() 里写的响应式逻辑行为完全一致。

State 就是 reactive 对象

定义 store 时，`state` 函数返回的对象会被 `reactive()` 自动包装（选项式）或由 `ref`/`reactive` 显式声明（组合式）。比如：

// 组合式写法：直接用 ref/reactive 声明
const count = ref(0)
const userInfo = reactive({ name: '', avatar: '' })

这些变量一进入 store，就已是响应式的，无需额外 toRefs 或 markRaw（除非你明确想跳过响应化）。

Getters 本质就是 computed

Pinia 的 `getters` 内部直接调用 `computed()`，所以天然具备缓存、依赖追踪、懒执行等特性。例如：

getters: {
  fullName: (state) => `${state.firstName} ${state.lastName}`
}
// 等价于在 setup 中写：
// const fullName = computed(() => `${state.firstName} ${state.lastName}`)

只要 firstName 或 lastName 变，fullName 就重算，模板中使用它也会自动更新。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

Actions 不影响响应性，但能安全修改 state

Actions 是普通函数，但它内部对 `state` 属性的赋值（如 `this.count++` 或 `state.count = 100`）会直接触发响应式更新。因为 `this` 指向的是被 `reactive` 包裹的 state 对象，所有变更都走 Vue 的依赖收集与触发流程。异步操作也一样：

async fetchUser() {
  const res = await api.getUser()
  this.userInfo = res // 响应式更新，组件立刻重绘
}

跨组件共享时，响应性不丢失

多个组件调用同一个 `useCounterStore()`，拿到的是同一个响应式对象的引用。一个组件调用 `counter.increment()`，其他组件绑定的 `counter.count` 和 `counter.doubleCount` 会同步更新——没有事件总线、没有手动通知，纯靠 Vue 的响应式系统驱动。