Pinia 状态管理：从入门到精通

最新推荐文章于 2025-11-17 16:25:42 发布
原创 最新推荐文章于 2025-11-17 16:25:42 发布 · 511 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #javascript #前端 #typescript #vue.js

一、Pinia 简介

1.1 什么是 Pinia？

Pinia 是 Vue 官方推荐的状态管理库，是 Vuex 的继任者。它简化了状态管理逻辑，原生支持 TypeScript，且与 Vue3 的 Composition API 完美契合。本文将从基础用法到高级技巧，全面讲解 Pinia 的使用。

1.2 为什么选择 Pinia？

  • ✅ 类型安全：完美的 TypeScript 支持
  • ✅ 开发工具：集成 Vue DevTools
  • ✅ 模块化：不需要嵌套模块
  • ✅ 轻量级：体积小巧，约 1KB
  • ✅ 组合式 API：完美支持 Vue3 组合式 API
  • ✅ 零依赖：不依赖其他库

二、快速开始

2.1 安装

npm install pinia
# 或
yarn add pinia
# 或
pnpm add pinia

2.2 基本配置

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

三、核心概念

3.1 定义 Store

选项式风格
// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // 状态
  state: () => ({
    count: 0,
    name: '计数器'
  }),
  
  // 计算属性
  getters: {
    doubleCount: (state) => state.count * 2,
    doubleCountPlusOne() {
      return this.doubleCount + 1
    }
  },
  
  // 操作方法
  actions: {
    increment() {
      this.count++
    },
    async incrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.increment()
    }
  }
})
组合式风格
// stores/user.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  // 状态
  const user = ref(null)
  const token = ref('')
  
  // 计算属性
  const isLoggedIn = computed(() => !!token.value)
  
  // 操作方法
  function login(userData) {
    user.value = userData
    token.value = 'token'
  }
  
  function logout() {
    user.value = null
    token.value = ''
  }
  
  async function fetchUserProfile() {
    const response = await fetch('/api/user')
    user.value = await response.json()
  }
  
  return {
    user,
    token,
    isLoggedIn,
    login,
    logout,
    fetchUserProfile
  }
})

3.2 在组件中使用 Store

<template>
  <div>
    <h2>{{ counterStore.name }}</h2>
    <p>计数: {{ counterStore.count }}</p>
    <p>双倍计数: {{ counterStore.doubleCount }}</p>
    <p>双倍计数+1: {{ counterStore.doubleCountPlusOne }}</p>
    
    <button @click="counterStore.increment()">+1</button>
    <button @click="counterStore.incrementAsync()">异步+1</button>
    <button @click="reset">重置</button>
    
    <div v-if="userStore.isLoggedIn">
      欢迎, {{ userStore.user?.name }}
      <button @click="userStore.logout()">退出</button>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

// 使用 store
const counterStore = useCounterStore()
const userStore = useUserStore()

// 方法可以直接使用
const reset = () => {
  counterStore.$reset() // 重置到初始状态
}

// 使用 storeToRefs 保持响应式
const { count, doubleCount } = storeToRefs(counterStore)
</script>

四、高级特性

4.1 状态持久化

// stores/persisted-store.js
import { defineStore } from 'pinia'
import { ref, watch } from 'vue'

export const usePersistedStore = defineStore('persisted', () => {
  const state = ref(JSON.parse(localStorage.getItem('app-state') || '{}'))
  
  // 监听状态变化并持久化
  watch(
    state,
    (newState) => {
      localStorage.setItem('app-state', JSON.stringify(newState))
    },
    { deep: true }
  )
  
  function updateState(key, value) {
    state.value[key] = value
  }
  
  return {
    state,
    updateState
  }
})

4.2 插件系统

// plugins/persistence.js
export const persistencePlugin = ({ store }) => {
  // 从 localStorage 恢复状态
  const stored = localStorage.getItem(`pinia-${store.$id}`)
  if (stored) {
    store.$patch(JSON.parse(stored))
  }
  
  // 监听变化并保存
  store.$subscribe((mutation, state) => {
    localStorage.setItem(`pinia-${store.$id}`, JSON.stringify(state))
  })
}

// main.js
import { createPinia } from 'pinia'
import { persistencePlugin } from './plugins/persistence'

const pinia = createPinia()
pinia.use(persistencePlugin)

4.3 Store 间通信

// stores/cart.js
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),
  actions: {
    addItem(product) {
      this.items.push(product)
    }
  }
})

// stores/notification.js
import { defineStore } from 'pinia'

export const useNotificationStore = defineStore('notification', {
  state: () => ({
    messages: []
  }),
  actions: {
    showMessage(message) {
      this.messages.push(message)
      setTimeout(() => {
        this.messages.shift()
      }, 3000)
    }
  }
})

// 在组件中使用
import { useCartStore } from '@/stores/cart'
import { useNotificationStore } from '@/stores/notification'

const cartStore = useCartStore()
const notificationStore = useNotificationStore()

const addToCart = (product) => {
  cartStore.addItem(product)
  notificationStore.showMessage('商品已添加到购物车')
}

五、最佳实践

5.1 项目结构

src/
├── stores/
│   ├── index.js          # Store 导出文件
│   ├── app.js           # 应用级别状态
│   ├── auth.js          # 认证状态
│   ├── user.js          # 用户数据
│   ├── products.js      # 商品数据
│   └── cart.js          # 购物车
└── components/
    └── ...

5.2 Store 导出文件

// stores/index.js
export { useAppStore } from './app'
export { useAuthStore } from './auth'
export { useUserStore } from './user'
export { useProductsStore } from './products'
export { useCartStore } from './cart'

// 在组件中导入
import { useAuthStore, useUserStore } from '@/stores'

5.3 类型安全（TypeScript）

// stores/types.ts
export interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'user'
}

export interface Product {
  id: number
  name: string
  price: number
  category: string
}

// stores/user.ts
import { defineStore } from 'pinia'
import type { User } from './types'

interface UserState {
  user: User | null
  token: string | null
  preferences: {
    theme: 'light' | 'dark'
    language: string
  }
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    user: null,
    token: null,
    preferences: {
      theme: 'light',
      language: 'zh-CN'
    }
  }),
  
  getters: {
    isLoggedIn: (state) => !!state.token,
    userName: (state) => state.user?.name || 'Guest'
  },
  
  actions: {
    setUser(user: User) {
      this.user = user
    },
    
    updatePreferences(preferences: Partial<UserState['preferences']>) {
      this.preferences = { ...this.preferences, ...preferences }
    }
  }
})

5.4 测试 Store

// __tests__/counter.store.spec.js
import { setActivePinia, createPinia } from 'pinia'
import { useCounterStore } from '@/stores/counter'

describe('Counter Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })
  
  it('should increment count', () => {
    const store = useCounterStore()
    expect(store.count).toBe(0)
    
    store.increment()
    expect(store.count).toBe(1)
  })
  
  it('should compute double count', () => {
    const store = useCounterStore()
    store.count = 5
    expect(store.doubleCount).toBe(10)
  })
  
  it('should reset state', () => {
    const store = useCounterStore()
    store.count = 10
    store.$reset()
    expect(store.count).toBe(0)
  })
})

六、性能优化

6.1 选择性响应式

<template>
  <div>
    <!-- 只监听需要的状态 -->
    <p>用户名: {{ userName }}</p>
    <p>主题: {{ theme }}</p>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()

// 只解构需要的数据，避免不必要的响应式
const { userName, theme } = storeToRefs(userStore)

// 或者直接访问，不创建 ref
const userName = computed(() => userStore.userName)
const theme = computed(() => userStore.preferences.theme)
</script>

6.2 批量更新

// 不好的做法 - 多次更新
userStore.updateName('新名字')
userStore.updateEmail('new@email.com')
userStore.updateTheme('dark')

// 好的做法 - 批量更新
userStore.$patch({
  user: {
    ...userStore.user,
    name: '新名字',
    email: 'new@email.com'
  },
  preferences: {
    ...userStore.preferences,
    theme: 'dark'
  }
})

七、调试技巧

7.1 Vue DevTools

// 在 Store 中添加调试信息
export const useDebugStore = defineStore('debug', {
  state: () => ({
    debug: process.env.NODE_ENV === 'development',
    logs: []
  }),
  
  actions: {
    log(action, payload) {
      if (this.debug) {
        this.logs.push({
          timestamp: new Date(),
          action,
          payload
        })
        console.log(`[Store Log] ${action}:`, payload)
      }
    }
  }
})

7.2 状态快照

// 保存和恢复状态快照
const saveSnapshot = () => {
  const snapshot = pinia.state.value
  localStorage.setItem('pinia-snapshot', JSON.stringify(snapshot))
}

const restoreSnapshot = () => {
  const snapshot = localStorage.getItem('pinia-snapshot')
  if (snapshot) {
    pinia.state.value = JSON.parse(snapshot)
  }
}

八、迁移指南

8.1 从 Vuex 迁移到 Pinia

VuexPinia说明
statestate()基本相同
gettersgetters基本相同
mutationsactionsPinia 没有 mutations
actionsactions支持异步操作
modules多个 store每个模块一个 store

8.2 迁移示例

Vuex:

// vuex store
export default {
  namespaced: true,
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    INCREMENT(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('INCREMENT')
      }, 1000)
    }
  }
}

Pinia:

// pinia store
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
    async incrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.increment()
    }
  }
})

九、总结

Pinia 提供了现代化、类型安全的状态管理解决方案。通过本指南，你应该能够：

  • ✅ 理解 Pinia 的核心概念
  • ✅ 在项目中正确使用 Pinia
  • ✅ 实现复杂的状态管理逻辑
  • ✅ 优化应用性能
  • ✅ 调试和测试 Store
  • ✅ 从 Vuex 平滑迁移

记住，状态管理的目标是让应用的状态变化可预测、易于调试。合理使用 Pinia，可以让你的 Vue3 应用更加健壮和可维护。

《Uniapp-Vue 3-TS 实战开发：从入门到精通》专栏介绍
前端-尔嵘
04-07 463
掌握 Uniapp 的基本原理与开发流程。熟练运用 Vue 3 的组合式 API 进行组件开发。学会使用 TypeScript 为项目添加类型支持，提高代码的可维护性和健壮性。能够独立完成一个完整的跨平台移动应用项目。
Pinia使用方法及持久化存储
热门推荐
前端学习笔记
03-24 2万+
Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态。它跟Vuex有一定的相似度，但还是有很大的区别。愿意看这篇博客的人，想必已经看过了官方文档，官方文档很详细，包含各种使用情景和理论，因此本文不说理论，只说具体的使用方法，想深入研究的建议去看官方文档，本文适合拿来即用。Pinia 官方文档。
【Vue全家桶】Pinia状态管理
QDCXYXZ_的博客
04-03 2726
Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。
Vue3（9）——Pinia（状态管理）
最新发布
希望粉丝数量比文章多！！！
11-17 1038
Store是用 defineStore() 定义的。store的唯一ID（必填）- 用于DevTools和插件识别配置对象（可选）- 包含state、getters、actions。
【pinia】新一代更好用的状态管理器Pinia
zhaochen1127的博客
04-21 2957
Pinia的设计主要是服务于Composite API（组合式API）的，相当于下一带的Vuex。因为Vuex主要是为了vue2种的选项是API服务的所以，并不适用于Vue3。当Vue3伴随着组合式API来到时，Pinia的诞生也就成为了必然，一个全新的用于 Vue的状态管理库Pinia。在Pinia种剔除了mutations，只剩了state，actions，getters，这就省去了很多麻烦。
pinia的简单用法
weixin_51173554的博客
12-07 3393
pinia的基本使用及数据持久化
Pinia的基本使用
qq_44505797的博客
04-27 1万+
(官网解释)一个 Store （如 Pinia）是一个实体，它持有未绑定到您的组件树的状态和业务逻辑。换句话说，它托管全局状态。它有点像一个始终存在并且每个人都可以读取和写入的组件。它有三个概念，state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”。我们可以把这三个概念理解为vue组件中的“数据”data、“计算”computed和“方法”methods。store简单来说就是数据仓库的意思，我们数据都放在store里面。
Vue3从入门到精通：4.3 Pinia状态管理深度应用与架构设计
08-14 646
本文深入解析Pinia状态管理库的设计理念与应用实践。文章对比了Vuex与Pinia的差异，突出Pinia在开发体验、TypeScript支持和模块化设计方面的优势。通过代码示例展示了Pinia直观的状态定义方式和完整的类型推导能力，包括状态、计算属性和方法的声明式写法。同时介绍了Pinia与Vue DevTools的深度集成特性，如时间旅行调试和状态快照功能。最后，文章还探讨了Pinia在大型应用中的最佳架构实践，为开发者提供全面的状态管理解决方案。
Vue3.0学习笔记(从入门到精通)中文PDF高清版最新版本
12-01
pinia提供了一个更简洁、更容易理解的状态管理方案，它更好地与Vue 3.0的组合式API集成。 最后，为了构建强大的单页应用，需要掌握一些高级技巧，如手写状态管理、fetch API的使用、处理异步操作和跨域问题等。这些...
前端工程师成长全景图：从入门到精通的系统化学习路径
漫画之迷学编程
09-24 1138
本文系统梳理了前端工程师从入门到精通的成长路径，分为三个阶段：入门阶段（1-3个月）掌握HTML、CSS、JavaScript基础，能开发静态页面；进阶阶段（3-9个月）深入学习CSS布局、JavaScript核心概念、前端工程化和主流框架（Vue/React）；精通阶段（9-18个月+）聚焦JavaScript深度、工程化优化、跨端开发等高级技能。每个阶段都明确了核心知识点、学习重点、实践项目和推荐资源，为开发者提供了清晰的成长路线图。
Vue.js 3项目实战源码：从入门到精通
Vue.js 3从入门到精通项目资源代码所涵盖的知识点极为广泛，涵盖了现代前端开发中最为关键的技术栈与工程化实践。该资源以“网页实现工程项目”为核心目标，系统性地展示了如何使用Vue.js 3.x构建功能完整、结构清晰...
Pinia基础及使用方法
Huangxianlong的博客
08-22 1954
简单来说，Pinia是vueX的新版本，我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理。Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。Pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据也允许我们在各个组件中使用。
Pinia: vue3状态管理
2201_75880772的博客
05-01 4726
Pinia: vue3状态管理
pinia状态管理
ZhangYu_010228的博客
04-11 1393
Pinia本质上是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样），是Vuex的代替者。
在VUE3中使用Pinia
lemon_sugar的博客
08-17 1980
在VUE3中使用pinia
pinia详细使用步骤（0基础）
qq_44423029的博客
08-23 1万+
pinia使用步骤整理，从0开始很详细
Pinia状态管理工具：【Vue3 + Pinia使用】 安装Pinia && Pinia基本使用 && 创建 store仓库 && Pinia持久化存储 && 配置本地存储 && 指定仓库数据存储
Forever_Hopeful的博客
04-13 3870
Pinia状态管理工具：【Vue3 + Pinia使用】 安装Pinia && Pinia基本使用 && 创建 store仓库 && Pinia持久化存储 && 配置本地存储 && 指定仓库数据存储
前端笔记-pinia状态管理
MrsBaek的博客
04-29 685
在通过定义的 store 中，使用ref或reactive定义响应式状态。})
（12）Pinia——状态管理的详细使用
緑水長流*z
05-06 2407
在使用Vue开发中，组件之间经常需要传值，基于父子、兄弟组件之间的传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，这样就不得不在访问该组件的路径上携带这些参数，这样极为不便。状态管理是指在应用程序中集中存储、管理和共享数据的机制，即建立一块区域存储所有组件共享的数据，类似于后端的session或者前端的localstorage。1）组件内部的状态（如data()refreactive定义的变量）。2）跨组件的共享状态（如用户登录信息、全局主题、购物车数据）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懒羊羊我小弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值