核心特性
Pinia 的设计哲学和关键技术特性
Vue官方
Vue.js官方推荐的状态管理库。Vuex的继任者，与Vue 3深度集成。
类型安全
完整的TypeScript支持。类型推断、类型检查，开发体验极佳。
轻量级
核心库仅1KB，压缩后更小。无依赖，性能优异。
简单API
API设计简单直观。无mutations，直接修改状态，学习成本低。
生态系统
围绕 Pinia 构建的完整工具链
Vue集成
与Vue 3深度集成。支持Composition API和Options API。
开发者工具
Vue DevTools集成。查看状态、时间旅行调试、状态快照。
持久化
pinia-plugin-persistedstate支持状态持久化。可存储到localStorage等。
Nuxt集成
与Nuxt 3深度集成。支持SSR、自动导入等特性。
插件系统
支持自定义插件。可扩展Pinia功能，添加中间件等。
测试支持
易于测试，可单独测试store。与Vitest、Jest等测试框架集成。
快速入门
# 安装Pinia
npm install pinia
# 在Vue中使用
// main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount("#app");
# 创建Store
// stores/counter.js
import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", {
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
});
# 在组件中使用
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
export default {
setup() {
const counter = useCounterStore();
const { count, doubleCount } = storeToRefs(counter);
return {
count,
doubleCount,
increment: counter.increment,
decrement: counter.decrement
};
}
};配置示例
// stores/user.js - 完整Store配置
import { defineStore } from "pinia";
export const useUserStore = defineStore("user", {
// 状态
state: () => ({
user: null,
token: null,
loading: false,
error: null
}),
// 计算属性
getters: {
isLoggedIn: (state) => !!state.token,
userName: (state) => state.user?.name || "Guest"
},
// 操作
actions: {
// 登录
async login(credentials) {
this.loading = true;
this.error = null;
try {
const response = await fetch("/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(credentials)
});
const data = await response.json();
this.user = data.user;
this.token = data.token;
// 持久化token
localStorage.setItem("token", data.token);
} catch (error) {
this.error = error.message;
} finally {
this.loading = false;
}
},
// 登出
logout() {
this.user = null;
this.token = null;
localStorage.removeItem("token");
},
// 获取用户信息
async fetchUser() {
if (!this.token) return;
this.loading = true;
try {
const response = await fetch("/api/user", {
headers: { Authorization: `Bearer ${this.token}` }
});
this.user = await response.json();
} catch (error) {
this.error = error.message;
this.logout();
} finally {
this.loading = false;
}
}
}
});
// 持久化插件配置
// main.js
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);学习资源
与其他状态管理库对比
vs Vuex
Pinia更简单，无mutations。Vuex更成熟，适合大型项目，但较复杂。
vs Redux
Pinia专为Vue设计，更简单。Redux通用，生态更成熟，但较复杂。
vs Zustand
Pinia专为Vue设计，与Vue集成更紧密。Zustand通用，支持多框架。