vue3 - pinia状态管理库

概念

Pinia 是 Vue 官方推荐的状态管理库，是 Vuex 的继任者（Vuex 作者同一人开发），专门为 Vue 3 设计，完全支持 Composition API 和 TypeScript。它简化了状态管理的流程，提供了更简洁的 API 和更好的开发体验。

核心特点

1. 简洁的 API
   去掉了 Vuex 中的 mutation（突变），直接通过 actions 或直接修改状态（对 state 直接赋值），减少模板代码。
2. 完全支持 TypeScript
   类型推断更友好，无需手动声明类型即可获得完整的类型提示，开发时能及时发现类型错误。
3. 与 Composition API 无缝集成
   可以在 setup 中轻松使用，支持直接解构状态而不失去响应性。
4. 模块化设计
   每个 store 都是一个独立的模块，无需像 Vuex 那样嵌套 modules，结构更清晰。
5. 轻量体积
   核心代码仅约 1KB，性能优于 Vuex。

安装pinia

npm i pinia

使用 pinia

src\main.ts

import { createApp } from "vue";
import App from "./App.vue";
// 第一步：引入pinia
import { createPinia } from "pinia";const app = createApp(App);
// 第二步：创建pinia
const pinia = createPinia();
// 第三步：安装pinia
app.use(pinia);
app.mount("#app");

安装成功