Pinia 状态操作详解

发布时间: 2025-03-22 12:29

↑

# Pinia 状态操作详解

本文将详细介绍Vue3中Pinia的状态操作方法，帮助你更好地理解和使用Pinia进行状态管理。

## 状态操作基础

### 访问状态

```vue
<template>
  <div class="user-info">
    <h2>{{ store.name }}</h2>
    <p>Count: {{ store.count }}</p>
    
    <p>Double count: {{ doubleCount }}</p>
  </div>
</template>

const store = useCounterStore()

// 使用storeToRefs解构，保持响应性
const { count, doubleCount } = storeToRefs(store)

// 直接解构会失去响应性
// const { count } = store // ❌ 这样会失去响应性
</script>
```

### 修改状态

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    items: []
  }),
  
  actions: {
    // 1. 直接修改
    increment() {
      this.count++
    },
    
    // 2. 批量修改
    updateState(payload) {
      // 使用$patch方法批量更新状态
      this.$patch({
        count: payload.count,
        items: [...this.items, ...payload.items]
      })
    },
    
    // 3. 使用函数式修改
    updateItems(newItems) {
      this.$patch((state) => {
        state.items = [...state.items, ...newItems]
        state.count = state.items.length
      })
    },
    
    // 4. 重置状态
    resetState() {
      // 重置到初始状态
      this.$reset()
    }
  }
})
```

## 高级状态操作

### 1. 订阅状态变化

```typescript
// 监听状态变化
const unsubscribe = store.$subscribe((mutation, state) => {
  // mutation.type: 'direct' | 'patch object' | 'patch function'
  // mutation.storeId: store的id
  // mutation.payload: 传入的参数
  console.log('State changed:', mutation.type, state)
  
  // 可以在这里同步状态到localStorage
  localStorage.setItem('store', JSON.stringify(state))
})

// 组件卸载时取消订阅
onUnmounted(() => {
  unsubscribe()
})

// 订阅action
store.$onAction({
  before: (action, state) => {
    console.log('Before action:', action.name)
  },
  after: (action, state) => {
    console.log('After action:', action.name)
  },
  onError: (action, error) => {
    console.error('Action failed:', action.name, error)
  }
})
```

### 2. 持久化状态

```typescript
// stores/persistedStore.ts
import { defineStore } from 'pinia'

export const usePersistedStore = defineStore('persisted', {
  state: () => ({
    user: null,
    preferences: {}
  }),
  
  actions: {
    // 保存状态到localStorage
    saveToStorage() {
      localStorage.setItem('user-store', JSON.stringify({
        user: this.user,
        preferences: this.preferences
      }))
    },
    
    // 从localStorage加载状态
    loadFromStorage() {
      const stored = localStorage.getItem('user-store')
      if (stored) {
        const { user, preferences } = JSON.parse(stored)
        this.user = user
        this.preferences = preferences
      }
    },
    
    // 更新用户信息并持久化
    updateUser(userData) {
      this.user = userData
      this.saveToStorage()
    },
    
    // 更新偏好设置并持久化
    updatePreferences(prefs) {
      this.preferences = { ...this.preferences, ...prefs }
      this.saveToStorage()
    }
  }
})
```

### 3. 状态热更新

```typescript
// stores/hotUpdateStore.ts
import { defineStore } from 'pinia'

export const useHotUpdateStore = defineStore('hot-update', {
  state: () => ({
    data: null,
    lastUpdated: null
  }),
  
  actions: {
    async refreshData() {
      try {
        const response = await fetch('/api/data')
        this.data = await response.json()
        this.lastUpdated = new Date()
      } catch (error) {
        console.error('Failed to refresh data:', error)
      }
    }
  }
})

// 在开发环境中启用热更新
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useHotUpdateStore, import.meta.hot))
}
```

## 状态组合

### 1. 组合多个Store

```typescript
// stores/cart.ts
import { defineStore } from 'pinia'
import { useUserStore } from './user'
import { useProductStore } from './product'

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
    checkoutStatus: null
  }),
  
  getters: {
    cartTotal: (state) => {
      return state.items.reduce((total, item) => {
        return total + item.price * item.quantity
      }, 0)
    }
  },
  
  actions: {
    async checkout() {
      const userStore = useUserStore()
      const productStore = useProductStore()
      
      if (!userStore.isLoggedIn) {
        throw new Error('Please login first')
      }
      
      this.checkoutStatus = 'processing'
      
      try {
        // 验证库存
        await productStore.validateStock(this.items)
        
        // 创建订单
        await this.createOrder({
          items: this.items,
          userId: userStore.user.id,
          total: this.cartTotal
        })
        
        // 更新库存
        await productStore.updateStock(this.items)
        
        // 清空购物车
        this.items = []
        this.checkoutStatus = 'success'
      } catch (error) {
        this.checkoutStatus = 'failed'
        throw error
      }
    }
  }
})
```

### 2. 共享行为

```typescript
// composables/useLoading.ts
import { ref } from 'vue'

export function useLoading() {
  const isLoading = ref(false)
  const error = ref(null)
  
  const withLoading = async (action) => {
    isLoading.value = true
    error.value = null
    
    try {
      await action()
    } catch (e) {
      error.value = e
      throw e
    } finally {
      isLoading.value = false
    }
  }
  
  return {
    isLoading,
    error,
    withLoading
  }
}

// stores/product.ts
import { defineStore } from 'pinia'
import { useLoading } from '@/composables/useLoading'

export const useProductStore = defineStore('product', () => {
  const { isLoading, error, withLoading } = useLoading()
  const products = ref([])
  
  const fetchProducts = async () => {
    await withLoading(async () => {
      const response = await fetch('/api/products')
      products.value = await response.json()
    })
  }
  
  return {
    products,
    isLoading,
    error,
    fetchProducts
  }
})
```

## 最佳实践

### 1. 状态结构设计

```typescript
// stores/types.ts
export interface Product {
  id: number
  name: string
  price: number
  stock: number
}

export interface CartItem extends Product {
  quantity: number
}

// stores/modules/product.ts
import type { Product } from '../types'

export const useProductStore = defineStore('product', {
  state: () => ({
    // 使用规范的数据结构
    entities: {} as Record<number, Product>,
    ids: [] as number[],
    // UI状态
    ui: {
      loading: false,
      error: null,
      selectedId: null
    }
  })
})
```

### 2. 错误处理

```typescript
// stores/modules/auth.ts
export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    error: null
  }),
  
  actions: {
    async login(credentials) {
      this.error = null
      
      try {
        const response = await fetch('/api/login', {
          method: 'POST',
          body: JSON.stringify(credentials)
        })
        
        if (!response.ok) {
          throw new Error('Login failed')
        }
        
        const data = await response.json()
        this.user = data.user
      } catch (error) {
        this.error = error.message
        throw error
      }
    }
  }
})
```

### 3. 性能优化

```typescript
// stores/modules/optimizedStore.ts
import { defineStore } from 'pinia'

export const useOptimizedStore = defineStore('optimized', {
  state: () => ({
    items: []
  }),
  
  getters: {
    // 使用缓存的计算属性
    processedItems: (state) => {
      return state.items.map(item => ({
        ...item,
        processed: expensiveOperation(item)
      }))
    }
  },
  
  actions: {
    // 批量更新而不是单个更新
    updateItems(items) {
      this.$patch((state) => {
        state.items = items
      })
    }
  }
})
```

## 总结

本文详细介绍了Pinia的状态操作方法：

1. 基础状态操作：访问和修改状态
2. 高级状态操作：状态订阅、持久化和热更新
3. 状态组合：多Store协作和共享行为
4. 最佳实践：状态设计、错误处理和性能优化

通过合理使用这些特性，我们可以更好地管理应用状态，提高代码的可维护性和性能。建议在实际开发中根据项目需求选择合适的状态操作方式，并注意遵循最佳实践。

元素码农