前端Wiki/词条/Pinia 状态管理

Pinia 状态管理

定义Vue 官方推荐的状态管理库：用组合式 API 风格定义跨组件共享的应用状态

当多个组件（且非父子关系）需要共享同一份数据——用户登录状态、购物车、全局主题——靠 props 逐层传递会失控，状态库把它抽到一个全局单例。Pinia 是 Vue 官方在 Vue 3 时代的答案（取代 Vuex）：完全基于组合式 API，store 用 defineStore 定义，state/getters/actions 概念更直观。

相对 Vuex 的进步：没有 mutations（mutations 是 Vuex 同步提交的设计负担）、天然 TypeScript 支持、支持模块化按需引入、DevTools 时间旅行调试一应俱全。store 可拆成多个小 store，组合性极强。

跨组件共享数据（登录/购物车/主题）从 props 解耦到全局单例
state = 数据、getters = 计算属性、actions = 方法（含异步）
组合式风格 store：defineStore(id, () => { const x = ref(); return {x} })

HTML

<!-- stores/user.js -->
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

// 组合式风格的 store
export const useUserStore = defineStore('user', () => {
  const token = ref('');                          // state
  const isLogin = computed(() => !!token.value);  // getter
  async function login(u, p) {                    // action（可异步）
    token.value = await api.login(u, p);
  }
  return { token, isLogin, login };
});

<!-- 组件使用 -->
<script setup>
import { useUserStore } from '../stores/user';
const user = useUserStore();
if (user.isLogin) user.login('a', 'b');   // 像组合式函数一样自然
</script>

⚠ 常见误区

在 Pinia 里找 mutations：Vuex 习惯，Pinia 直接改/写 action 即可
组件内解构 store 丢响应性（需要 storeToRefs 包装）
把只属于某组件的私有数据塞进 store，全局状态被污染

🔗 相关词条Vue Router 路由组合式 API 计算属性与侦听器