Vue状态管理：Pinia完整指南

作者头像东城·2026-01-31 23:28:01·
概述
本文是Vue前端开发入门系列的第13部分，专注于Vue的状态管理。我们将深入探讨如何使用Pinia来管理Vue应用程序的状态。
状态管理
使用props和emit进行父子组件间的数据协作虽然方便，但在以下情况下可能不够充分，数据传递往往会变得复杂：
组件层次结构变得很深
需要在没有父子关系的组件之间共享数据
解决这些问题的就是状态管理库。
Pinia Store
Vue官方推荐的状态管理库是Pinia（皮尼亚）。Pinia可以统一管理整个应用程序的数据，让任何组件都能访问和更新数据。
  1. +-----------------------+
  2. | Pinia Store |
  3. | (应用程序整体状态) |
  4. +-----------+-----------+
  5. ^
  6. |
  7. | 数据引用
  8. | 数据更新
  9. |
  10. v
  11. +-------------------------------------+
  12. | 任意组件 |
  13. | (ComponentA, ComponentB, ...) |
  14. +-------------------------------------+
Pinia Store（存储）是定义要共享的数据（状态）和操作这些数据的函数（动作）的地方。应用程序可以有一个或多个存储。
Pinia Store的主要元素
元素
说明
示例
State
要共享的数据主体
count: 0, userList: []
Getters
从State派生的计算值（会被缓存）
doubleCount, activeUsers
Actions
数据变更处理（函数）
increment(), fetchUsers()
详细说明
State（状态）: 存储在存储中的"数据主体"。它是响应式的，当发生变化时，会自动反映到使用它的所有组件中。
Getters（获取器）: 从状态派生的（经过处理的）值进行计算和获取的函数。像computed属性一样，只有在依赖的数据发生变化时才会重新计算，并且会被缓存。
Actions（动作）: 用于更改状态的函数。在这里编写数据变更逻辑和异步处理（API通信等）。
使用Pinia
1. 安装
  1. npm install pinia
bash
2. Pinia的初始设置（在main.js等文件中）
  1. // main.js
  2. import { createApp } from 'vue'
  3. // 导入Pinia
  4. import { createPinia } from 'pinia'
  5. import App from './App.vue'

  7. const app = createApp(App)
  8. // 将Pinia应用到应用程序
  9. app.use(createPinia())
  10. app.mount('#app')
javascript
3. Store的定义（以stores/counter.js为例）
  1. // stores/counter.js
  2. import { defineStore } from 'pinia'
  3. import { ref, computed } from 'vue'

  5. export const useCounterStore = defineStore('counter', () => {
  6. // 状态
  7. const count = ref(0)
  9. // 获取器
  10. const doubleCount = computed(() => count.value * 2)
  12. // 动作
  13. function increment() {
  14. count.value++
  15. }
  17. function decrement() {
  18. count.value--
  19. }
  21. // 导出
  22. return { count, doubleCount, increment, decrement }
  23. })
javascript
4. 在组件中使用
  1. <template>
  2. <p>当前计数: {{ counterStore.count }}p>
  3. <p>双倍计数: {{ counterStore.doubleCount }}p>
  4. <button @click="counterStore.increment()">增加button>
  5. <button @click="counterStore.decrement()">减少button>
  6. template>

  8. <script setup>
  9. // 导入定义的存储
  10. import { useCounterStore } from '../stores/counter'
  11. // 使存储可用
  12. const counterStore = useCounterStore()
  13. script>
vue
实际应用示例
用户管理Store
  1. // stores/user.js
  2. import { defineStore } from 'pinia'
  3. import { ref, computed } from 'vue'

  5. export const useUserStore = defineStore('user', () => {
  6. // 状态
  7. const users = ref([])
  8. const currentUser = ref(null)
  9. const isLoading = ref(false)
  11. // 获取器
  12. const activeUsers = computed(() =>
  13. users.value.filter(user => user.status === 'active')
  14. )
  16. const userCount = computed(() => users.value.length)
  18. // 动作
  19. async function fetchUsers() {
  20. isLoading.value = true
  21. try {
  22. const response = await fetch('/api/users')
  23. users.value = await response.json()
  24. } catch (error) {
  25. console.error('获取用户失败:', error)
  26. } finally {
  27. isLoading.value = false
  28. }
  29. }
  31. function addUser(user) {
  32. users.value.push(user)
  33. }
  35. function setCurrentUser(user) {
  36. currentUser.value = user
  37. }
  39. return {
  40. users,
  41. currentUser,
  42. isLoading,
  43. activeUsers,
  44. userCount,
  45. fetchUsers,
  46. addUser,
  47. setCurrentUser
  48. }
  49. })
javascript
在多个组件中使用
  2. <template>
  3. <div>
  4. <h2>用户列表 ({{ userStore.userCount }})h2>
  5. <div v-if="userStore.isLoading">加载中...div>
  6. <ul v-else>
  7. <li v-for="user in userStore.activeUsers" :key="user.id">
  8. {{ user.name }}
  9. li>
  10. ul>
  11. div>
  12. template>

  14. <script setup>
  15. import { useUserStore } from '../stores/user'

  17. const userStore = useUserStore()

  19. // 组件挂载时获取用户数据
  20. onMounted(() => {
  21. userStore.fetchUsers()
  22. })
  23. script>
vue
  2. <template>
  3. <div>
  4. <h2>当前用户h2>
  5. <div v-if="userStore.currentUser">
  6. <p>姓名: {{ userStore.currentUser.name }}p>
  7. <p>邮箱: {{ userStore.currentUser.email }}p>
  8. div>
  9. <div v-else>
  10. <p>未选择用户p>
  11. div>
  12. div>
  13. template>

  15. <script setup>
  16. import { useUserStore } from '../stores/user'

  18. const userStore = useUserStore()
  19. script>
vue
Pinia的优势
1. 简单易用
基于Composition API，语法简洁
自动类型推断，TypeScript友好
无需复杂的模块注册
2. 开发工具支持
Vue DevTools完全支持
时间旅行调试
状态快照和恢复
3. 模块化设计
可以创建多个Store
支持Store之间的组合
便于代码分割和懒加载
4. 性能优化
响应式系统高效
自动缓存计算属性
按需加载Store
最佳实践
1. Store命名规范
  1. // 使用use前缀和Store后缀
  2. export const useUserStore = defineStore('user', () => {
  3. // ...
  4. })
javascript
2. 状态设计原则
保持状态扁平化
避免深层嵌套
使用计算属性派生状态
3. 动作设计
动作应该是纯函数
处理异步操作
提供错误处理
4. 组件集成
在setup函数中使用Store
避免在模板中直接调用动作
使用计算属性优化性能
总结
通过使用Pinia，您可以从应用程序的任何地方访问要共享的数据，并使用统一的方法进行更改。这使得即使在大型应用程序中，数据流也变得清晰，管理变得容易。
Pinia不仅解决了组件间数据共享的问题，还提供了强大的状态管理能力，是现代Vue应用程序开发中不可或缺的工具。