Vue
Pinia
Vue 3 Pinia 解决的问题、使用方式和注意事项。
发布于 2026年5月30日0 views
Pinia 是 Vue 生态常用的状态管理库，用来保存跨组件、跨页面共享的状态。
解决什么问题
组件自己的状态可以用 ref 或 reactive，父子传递可以用 props / emit。
但如果很多页面都需要同一份数据，比如登录用户、Token、权限菜单，就适合放到 Pinia。
基本写法
import { defineStore } from "pinia";
export const useAuthStore = defineStore("auth", {
state: () => ({
token: "",
user: null as User | null,
}),
actions: {
setToken(token: string) {
this.token = token;
},
logout() {
this.token = "";
this.user = null;
},
},
});组件中使用：
<script setup lang="ts">
const authStore = useAuthStore();
function logout() {
authStore.logout();
}
</script>适合放什么
适合：
- 登录 Token。
- 用户信息。
- 权限菜单。
- 主题、语言。
- 跨页面共享的业务状态。
不适合：
- 单个组件内部状态。
- 普通表单输入。
- 弹窗开关。
- 所有接口返回数据。
getters
如果需要从 state 派生数据，可以使用 getters：
getters: {
isLoggedIn: (state) => Boolean(state.token),
}组件里读取：
authStore.isLoggedIn;注意事项
- Pinia 不要变成万能数据仓库。
- 页面列表数据优先放页面或请求缓存里。
- 需要持久化时，再考虑 localStorage 插件或手动同步。
- action 里可以调用 API，但要避免业务逻辑过度集中。
总结
Pinia 适合管理跨页面共享状态。局部状态留在组件，复用逻辑放 composable，真正需要全局共享的数据再进入 Pinia。