Vue 3 项目初始化怎么集成 Pinia 状态管理

雨墨小哥_5187

雨墨小哥_5187

2026-10-19

658人浏览

原创

vue 3 集成 pinia 仅需三步:安装(npm/yarn/pnpm install pinia)、创建实例(createpinia())、挂载(app.use(pinia));推荐在 main.js/ts 中靠前注册,随后可在组件中直接 usexxxstore() 访问状态。

vue 3 项目初始化怎么集成 pinia 状态管理

Vue 3 项目集成 Pinia 很直接,核心就三步:安装、创建实例、挂载到应用。不需要额外配置或复杂约定,开箱即用。

安装 Pinia

在项目根目录运行对应包管理命令:

  • npm:npm install pinia
  • yarn:yarn add pinia
  • pnpm(推荐):pnpm add pinia

在 main.js 或 main.ts 中注册

打开项目入口文件(通常是 src/main.js 或 src/main.ts),创建 Pinia 实例并调用 app.use() 挂载:

  • 确保先导入 createApp 和 createPinia
  • 调用 createPinia() 创建实例,再传给 app.use()
  • 挂载顺序建议靠前(早于 router、i18n 等插件)

示例(TypeScript):

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习