Pinia 与 TypeScript 集成指南

zzz

Pinia 是 Vue.js 的官方状态管理库，与 TypeScript 的集成非常出色。下面我将详细介绍如何将两者结合使用。

1.基础设置
  安装依赖

1. npm install pinia
   
2. npm install -D typescript @vue/tsconfig

复制代码

  创建 Pinia Store 并添加类型

1. // stores/counter.ts
   
2. import { defineStore } from 'pinia'
   
3. 
   
4. // 定义状态接口
   
5. interface CounterState {
   
6.   count: number
   
7.   name: string
   
8. }
   
9. 
   
10. export const useCounterStore = defineStore('counter', {
    
11.   // 状态类型注解
    
12.   state: (): CounterState => ({
    
13.     count: 0,
    
14.     name: 'Counter Store'
    
15.   }),
    
16.   
    
17.   // Getter 类型推断
    
18.   getters: {
    
19.     doubleCount: (state) => state.count * 2,
    
20.     // 明确返回类型
    
21.     doubleCountPlusOne(): number {
    
22.       return this.doubleCount + 1
    
23.     },
    
24.     // 使用参数并指定返回类型
    
25.     getCountPlus: (state) => {
    
26.       return (plus: number): number => state.count + plus
    
27.     }
    
28.   },
    
29.   
    
30.   actions: {
    
31.     // Action 方法
    
32.     increment() {
    
33.       this.count++
    
34.     },
    
35.     // 带参数的 action
    
36.     incrementBy(amount: number) {
    
37.       this.count += amount
    
38.     },
    
39.     // 异步 action
    
40.     async incrementAsync() {
    
41.       const response = await fetch('/api/increment')
    
42.       const data = await response.json()
    
43.       this.count += data.amount
    
44.     }
    
45.   }
    
46. })

复制代码

2. 组合式 API 风格的 Store

1. // stores/user.ts
   
2. import { defineStore } from 'pinia'
   
3. import { ref, computed } from 'vue'
   
4. 
   
5. interface User {
   
6.   id: number
   
7.   name: string
   
8.   email: string
   
9. }
   
10. 
    
11. export const useUserStore = defineStore('user', () => {
    
12.   // 状态
    
13.   const user = ref<User | null>(null)
    
14.   const isLoggedIn = ref(false)
    
15.   
    
16.   // Getter 等价物
    
17.   const userName = computed(() => user.value?.name || 'Guest')
    
18.   const userEmail = computed(() => user.value?.email || '')
    
19.   
    
20.   // Actions
    
21.   function login(email: string, password: string) {
    
22.     return new Promise<void>((resolve) => {
    
23.       setTimeout(() => {
    
24.         user.value = {
    
25.           id: 1,
    
26.           name: 'John Doe',
    
27.           email: email
    
28.         }
    
29.         isLoggedIn.value = true
    
30.         resolve()
    
31.       }, 1000)
    
32.     })
    
33.   }
    
34.   
    
35.   function logout() {
    
36.     user.value = null
    
37.     isLoggedIn.value = false
    
38.   }
    
39.   
    
40.   return {
    
41.     user,
    
42.     isLoggedIn,
    
43.     userName,
    
44.     userEmail,
    
45.     login,
    
46.     logout
    
47.   }
    
48. })

复制代码

3. 在组件中使用
  选项式API组件

1. <template>
   
2. <div>
   
3. <h1>{{ store.name }}</h1>
   
4. <p>Count: {{ store.count }}</p>
   
5. <p>Double: {{ store.doubleCount }}</p>
   
6. <button @click="store.increment()">Increment</button>
   
7. </div>
   
8. </template>
   
9. 
   
10. <script lang="ts">
    
11. import { defineComponent } from 'vue'
    
12. import { useCounterStore } from '@/stores/counter'
    
13. 
    
14. export default defineComponent({
    
15. setup() {
    
16. const store = useCounterStore()
    
17. 
    
18. return {
    
19. store
    
20. }
    
21. }
    
22. })
    
23. </script>

复制代码

  组合式API组件

1. <template>
   
2. <div>
   
3. <h1>User: {{ userName }}</h1>
   
4. <p>Email: {{ userEmail }}</p>
   
5. <p v-if="isLoggedIn">Status: Logged In</p>
   
6. <button @click="login('test@example.com', 'password')">Login</button>
   
7. <button @click="logout">Logout</button>
   
8. </div>
   
9. </template>
   
10. 
    
11. <script setup lang="ts">
    
12. import { storeToRefs } from 'pinia'
    
13. import { useUserStore } from '@/stores/user'
    
14. 
    
15. const userStore = useUserStore()
    
16. 
    
17. // 使用 storeToRefs 保持响应式
    
18. const { userName, userEmail, isLoggedIn } = storeToRefs(userStore)
    
19. 
    
20. // 直接解构 actions
    
21. const { login, logout } = userStore
    
22. </script>

复制代码

4. 高级类型技巧
  自定义类型 Store

1. // stores/types.ts
   
2. export interface Product {
   
3. id: number
   
4. name: string
   
5. price: number
   
6. category: string
   
7. }
   
8. 
   
9. export interface CartItem {
   
10. product: Product
    
11. quantity: number
    
12. }
    
13. 
    
14. export interface CartState {
    
15. items: CartItem[]
    
16. total: number
    
17. }

复制代码

  使用复杂类型的 Store  

1. // stores/cart.ts
   
2. import { defineStore } from 'pinia'
   
3. import type { CartState, CartItem, Product } from './types'
   
4. 
   
5. export const useCartStore = defineStore('cart', {
   
6.   state: (): CartState => ({
   
7.     items: [],
   
8.     total: 0
   
9.   }),
   
10.   
    
11.   getters: {
    
12.     itemCount: (state) => state.items.reduce((sum, item) => sum + item.quantity, 0),
    
13.     getItemByProductId: (state) => {
    
14.       return (productId: number): CartItem | undefined =>
    
15.         state.items.find(item => item.product.id === productId)
    
16.     }
    
17.   },
    
18.   
    
19.   actions: {
    
20.     addItem(product: Product, quantity: number = 1) {
    
21.       const existingItem = this.items.find(item => item.product.id === product.id)
    
22.       
    
23.       if (existingItem) {
    
24.         existingItem.quantity += quantity
    
25.       } else {
    
26.         this.items.push({ product, quantity })
    
27.       }
    
28.       
    
29.       this.updateTotal()
    
30.     },
    
31.    
    
32.     removeItem(productId: number) {
    
33.       this.items = this.items.filter(item => item.product.id !== productId)
    
34.       this.updateTotal()
    
35.     },
    
36.    
    
37.     updateTotal() {
    
38.       this.total = this.items.reduce((sum, item) =>
    
39.         sum + (item.product.price * item.quantity), 0
    
40.       )
    
41.     }
    
42.   }
    
43. })

复制代码

5. 插件与类型扩展  
  创建带类型的插件

1. // plugins/persistence.ts
   
2. import { PiniaPluginContext } from 'pinia'
   
3. 
   
4. interface PersistenceOptions {
   
5.   key?: string
   
6.   storage?: Storage
   
7. }
   
8. 
   
9. function piniaPersistencePlugin(options: PersistenceOptions = {}) {
   
10.   return (context: PiniaPluginContext) => {
    
11.     const { store } = context
    
12.     const key = options.key || `pinia-${store.$id}`
    
13.     const storage = options.storage || localStorage
    
14.    
    
15.     // 从存储中恢复状态
    
16.     const stored = storage.getItem(key)
    
17.     if (stored) {
    
18.       store.$patch(JSON.parse(stored))
    
19.     }
    
20.    
    
21.     // 监听变化并保存
    
22.     store.$subscribe((mutation, state) => {
    
23.       storage.setItem(key, JSON.stringify(state))
    
24.     })
    
25.   }
    
26. }
    
27. 
    
28. export default piniaPersistencePlugin

复制代码

  类型扩展

1. // types/pinia.d.ts
   
2. import 'pinia'
   
3. 
   
4. declare module 'pinia' {
   
5.   export interface PiniaCustomProperties {
   
6.     // 可以添加自定义属性
   
7.     $customMethod: (value: string) => void
   
8.   }
   
9.   
   
10.   export interface DefineStoreOptionsBase<S, Store> {
    
11.     // 可以添加 store 配置选项
    
12.     persist?: boolean
    
13.   }
    
14. }

复制代码

6. 测试中的类型安全

1. // tests/counter.spec.ts
   
2. import { setActivePinia, createPinia } from 'pinia'
   
3. import { useCounterStore } from '@/stores/counter'
   
4. import { describe, it, expect, beforeEach } from 'vitest'
   
5. 
   
6. describe('Counter Store', () => {
   
7.   beforeEach(() => {
   
8.     setActivePinia(createPinia())
   
9.   })
   
10.   
    
11.   it('should increment count', () => {
    
12.     const store = useCounterStore()
    
13.    
    
14.     expect(store.count).toBe(0)
    
15.     store.increment()
    
16.     expect(store.count).toBe(1)
    
17.   })
    
18.   
    
19.   it('should calculate double count', () => {
    
20.     const store = useCounterStore()
    
21.     store.count = 5
    
22.    
    
23.     expect(store.doubleCount).toBe(10)
    
24.   })
    
25.   
    
26.   it('should handle async increment', async () => {
    
27.     const store = useCounterStore()
    
28.    
    
29.     // 模拟 API 调用
    
30.     global.fetch = vi.fn().mockResolvedValue({
    
31.       json: () => Promise.resolve({ amount: 3 })
    
32.     })
    
33.    
    
34.     await store.incrementAsync()
    
35.     expect(store.count).toBe(3)
    
36.   })
    
37. })

复制代码