Actions 是修改 Pinia State 的推荐方式，需通过 this.xxx（Options 写法）或 xxx.value（组合式写法）操作响应式源，支持同步与异步，避免解构或整体替换导致响应性丢失。
在 Pinia 中，Actions 是修改 State 的推荐方式，它让状态变更逻辑集中、可复用、易测试，也天然支持异步操作。你不能直接在组件里随意赋值修改 store 的响应式属性（虽技术上可行，但破坏设计原则），而应通过定义在 actions 中的方法来触发变更。
Actions 内部怎么改 State？
在 defineStore 的 actions 选项中，函数体内的 this 指向当前 store 实例，所有 state 属性都可通过 this.xxx 直接读写（前提是 state 是响应式 ref 或普通对象属性）。
- 若 state 使用
ref()定义（组合式写法），需操作this.xxx.value - 若 state 使用对象字面量定义（options 写法），可直接操作
this.xxx - 数组增删改、对象属性赋值、ref.value 赋新值等常规 JS 操作都有效
两种常见写法的修改示例
✅ Options 写法（推荐初学者）：
state 是普通对象，直接 this.xxx = xxxexport const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
list: ['a', 'b']
}),
actions: {
increment() {
this.count++ // ✅ 直接改
},
addToList(item) {
this.list.push(item) // ✅ 原地修改数组
}
}
})
✅ 组合式写法（更贴近 setup）：
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const list = ref(['a', 'b'])
function increment() {
count.value++ // ✅ 必须加 .value
}
function addToList(item) {
list.value.push(item) // ✅ 同样要 .value
}
return { count, list, increment, addToList }
})
注意事项：避免丢失响应性
以下写法会切断响应性，务必避免：
-
this.list = [...this.list, newItem]—— 虽然能更新，但替换了整个 ref，旧引用失效 -
const { list } = this; list.push(...)—— 解构后失去响应式代理 - 对嵌套深层对象做整体赋值（如
this.user = {...}）而未用reactive或ref包裹
✅ 正确做法是：始终通过 this.xxx（options）或 xxx.value（组合式）操作原始响应式源。
可以同步，也可以异步
Actions 天然支持 async/await，适合处理 API 请求后更新状态：
actions: {
async fetchUser(id) {
const res = await api.getUser(id)
this.user = res.data // ✅ 同步赋值到 state
}
}
