pinia安装挂载只需三步:安装依赖→创建实例→注册到vue应用;需node≥18,main.ts中按序创建pinia并use,且须在router前;注册后组件可直接usestore并支持devtools调试。

Pinia 安装和挂载非常直接,5 分钟内就能完成,核心就三步:安装依赖 → 创建 Pinia 实例 → 在 Vue 应用中注册。
安装 Pinia 依赖
在项目根目录运行对应包管理命令:
-
npm:
npm install pinia -
yarn:
yarn add pinia -
pnpm(推荐):
pnpm add pinia
确保你的 Node 版本 ≥ 18(Vite 5+ 要求),否则可能安装失败或运行异常。
在 main.ts 或 main.js 中创建并注册实例
打开入口文件(通常是 src/main.ts),按顺序写入以下代码:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
const pinia = createPinia() // 创建 Pinia 实例
app.use(pinia) // 注册插件(必须在 app.mount 之前)
app.mount('#app')
注意:如果同时使用 Vue Router,app.use(pinia) 必须放在 app.use(router) 之前,否则部分 SSR 或插件集成可能出现问题。
验证是否生效
注册完成后,你就可以在任意组件中使用 Store。例如,在 setup() 中调用:
- 导入 store:
import { useCounterStore } from '@/stores/counter' - 获取实例:
const counter = useCounterStore() - 访问状态:
{{ counter.count }}或调用方法:@click="counter.increment"
此时浏览器 DevTools 的 Pinia 面板也会自动激活,可实时查看状态变化和时间旅行调试。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










