当前位置：首页 > article >正文

Pinia 3.0 正式发布：全面拥抱 Vue 3 生态，升级指南与实战教程

article 2025/2/25 3:05:29

一、重大版本更新解析

2024年2月11日，Vue 官方推荐的状态管理库 Pinia 迎来 3.0 正式版发布，本次更新标志着其全面转向 Vue 3 技术生态。以下是开发者需要重点关注的升级要点：

1.1 核心变更说明

特性	3.0 版本要求	兼容性说明
Vue 支持	Vue 3.3+	Vue 2 项目需继续使用 Pinia 2.x
TypeScript	TS 5.0+	需升级开发环境
Devtools	Vue Devtools 7.x	支持 Composition API 调试
Nuxt 集成	Nuxt 3 原生支持	Nuxt 2 需使用 bridge 方案

1.2 升级决策建议

✅ 新建项目：强制推荐使用 3.0 版本
⚠️ 存量项目：Vue 2 项目维持 2.x 版本，Vue 3 项目可根据实际情况逐步升级
🔧 迁移工具：官方提供 pinia-migration 辅助工具

二、Pinia 3.0 快速上手指南

2.1 环境配置

# 创建新项目
npm create vue@latest

# 安装依赖
npm install pinia@latest

2.2 初始化配置

// main.ts
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')

三、核心功能实战教学

3.1 Store 模块开发

// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

3.2 组件集成方案

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

const counterStore = useCounterStore()
const { count, doubleCount } = storeToRefs(counterStore)
</script>

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <p>双倍计数: {{ doubleCount }}</p>
    <button @click="counterStore.increment()">+1</button>
  </div>
</template>

3.3 组合式 API 集成

// composables/useCounterLogic.ts
import { useCounterStore } from '@/stores/counter'

export function useCounterLogic() {
  const store = useCounterStore()
  
  const formattedCount = computed(() => `当前计数: ${store.count}`)
  
  return {
    formattedCount,
    increment: store.increment
  }
}

四、企业级最佳实践

4.1 模块化架构设计

src/
├── stores/
│   ├── user.ts       # 用户模块
│   ├── product.ts    # 商品模块
│   └── cart.ts       # 购物车模块

4.2 TypeScript 强化类型

// types/user.d.ts
interface UserState {
  id: number
  name: string
  roles: string[]
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    id: 0,
    name: '未登录用户',
    roles: []
  })
})

4.3 持久化存储方案

npm install pinia-plugin-persistedstate

// store 配置
export const useCartStore = defineStore('cart', {
  persist: {
    key: 'app-cart',
    storage: localStorage,
    paths: ['items']
  }
})