Pinia 怎么在 Vue 3 项目中安装并配置基础状态仓库-Vue.js-PHP中文网

Pinia 在 Vue 3 中安装配置只需三步：安装包、在 main.ts 中注册、用 defineStore 创建仓库；支持 TS，无需 map 辅助函数，开箱即用。

pinia 怎么在 vue 3 项目中安装并配置基础状态仓库

Pinia 在 Vue 3 项目中安装和配置非常直接，核心就三步：装包、注册、建仓库。不需要复杂模块划分或命名空间，上手快、结构清晰。

安装 Pinia

在项目根目录执行对应包管理命令：

npm：运行 npm install pinia
yarn：运行 yarn add pinia
pnpm：运行 pnpm add pinia

推荐使用与项目一致的包管理器，确保依赖版本兼容（Pinia v2.x 要求 Vue 3.2+，Node.js ≥16）。

在 main.js 或 main.ts 中全局注册

打开项目入口文件（Vite 默认为 src/main.js 或 src/main.ts），引入并挂载 Pinia 实例：

导入 createPinia 并创建实例
调用 app.use(pinia) 注册，必须在 app.mount() 之前

示例（main.ts）：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
<p>const app = createApp(App)
const pinia = createPinia()
app.use(pinia) // 关键：注册状态管理器
app.mount('#app')
</p>

创建第一个状态仓库（store）

在 src/stores/ 目录下新建文件，比如 counterStore.ts（推荐 TS）：

vue-admin-change-reviewer

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

下载

用 defineStore 定义仓库，第一个参数是唯一 ID（如 'counter'）
state 返回初始数据对象（响应式基础）
getters 写计算逻辑（支持箭头函数或方法形式）
actions 封装修改逻辑（同步或异步均可）

示例代码：

// src/stores/counterStore.ts
import { defineStore } from 'pinia'
<p>export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: '计数器'
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++
},
reset() {
this.count = 0
}
}
})
</p>

注意：函数名习惯以 useXxxStore 命名，符合组合式 API 风格，也利于自动类型推导。