Pinia 怎么定义和创建一个基础的 Store 状态库-Vue.js-PHP中文网

pinia 定义 store 的核心是 definestore() 函数，在 src/stores 下新建文件并传入唯一 id 和状态配置；支持选项式（state/getters/actions 分离）和组合式（ref/computed/函数组织）两种写法，前者语义清晰易维护，后者更灵活可复用组合式 api。

pinia 怎么定义和创建一个基础的 store 状态库

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 友好：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

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()
}
}
})</p>

组合式 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
}
})</p>