Pinia 定义 Store 的核心是 defineStore() 函数，在 src/stores 下新建文件并传入唯一 ID 和状态配置；支持选项式（state/getters/actions 分离）和组合式（ref/computed/函数组织）两种写法，前者语义清晰易维护，后者更灵活可复用组合式 API。
Pinia 定义和创建一个基础 Store，核心是用 defineStore() 函数，在 src/stores 目录下新建文件（如 counter.js 或 counter.ts），传入唯一 ID 和状态配置即可。不需要额外的 setup 步骤或模板包裹，结构清晰、开箱即用。
定义 Store 的两种主流写法
Pinia 支持选项式（Options API 风格）和组合式（Setup 风格），二者都通过 defineStore 创建，区别在于内部组织逻辑：
-
选项式 Store（推荐初学者）：类似 Vue 组件的 options 对象，明确区分
state、getters、actions -
组合式 Store（适合复用复杂逻辑）：在函数内用
ref、computed、普通函数组织，返回要暴露的响应式属性和方法
选项式 Store 示例（最常用）
这是多数项目首选的写法，语义清晰、易维护、TypeScript 友好：
import { defineStore } from 'pinia'
<p>export const useCounterStore = defineStore('counter', {
// state 必须是函数，返回初始对象
state: () => ({
count: 0,
name: 'Vue'
}),
// getters 类似 computed，可访问 state 或其他 getter
getters: {
doubleCount: (state) => state.count * 2,
doubleCountPlusOne(): number {
return this.doubleCount + 1
}
},
// actions 封装同步/异步业务逻辑，this 指向整个 store 实例
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
async incrementAsync() {
await new Promise(resolve => setTimeout(resolve, 1000))
this.increment()
}
}
})组合式 Store 示例（更灵活）
适合需要使用 watch、onMounted 等组合式 API，或想复用自定义 hook 的场景：
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
<p>export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const message = ref('Hello Pinia')</p><p>const doubleCount = computed(() => count.value * 2)</p><p>function increment() {
count.value++
}</p><p>function reset() {
count.value = 0
}</p><p>return {
count,
message,
doubleCount,
increment,
reset
}
})关键注意事项
-
store 名称必须唯一，作为 devtools 识别和热更新的 key，例如
'counter'、'user' -
导出函数名建议以
use开头 +Store结尾，如useCounterStore，符合组合式函数命名约定 - state 必须是函数，避免多个组件实例共享同一对象引用
- 如果用了 TypeScript，组合式写法需注意类型推断；选项式写法可配合接口显式声明
state类型
