Vuex 组合式API使用详解

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

↑

# Vuex 组合式API使用详解

本文将详细介绍如何在Vue3中使用组合式API风格来使用Vuex，帮助你更好地理解和掌握这种新的开发方式。

## 为什么使用组合式API？

组合式API是Vue3的一大特性，它提供了更好的代码组织方式和逻辑复用能力。在Vuex中使用组合式API有以下优势：

- 更好的TypeScript支持
- 更好的代码组织
- 更好的逻辑复用
- 更好的IDE支持

## 基础用法

### useStore

在组合式API中，我们使用`useStore`来获取store实例：

```vue
<template>
  <div class="counter">
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="incrementAsync">Async +1</button>
  </div>
</template>

const store = useStore()

// 获取状态
const count = computed(() => store.state.count)

// 提交mutation
const increment = () => store.commit('increment')

// 分发action
const incrementAsync = () => store.dispatch('incrementAsync')
</script>
```

## 状态和Getter

### 使用状态

```vue
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

// 基础状态
const user = computed(() => store.state.user)

// 嵌套状态
const userProfile = computed(() => store.state.user.profile)

// 模块状态
const cartItems = computed(() => store.state.cart.items)
</script>
```

### 使用Getter

```vue
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

// 基础getter
const totalPrice = computed(() => store.getters.cartTotalPrice)

// 带参数的getter
const getProductById = (id) => store.getters.getProductById(id)

// 模块getter
const isAdmin = computed(() => store.getters['user/isAdmin'])
</script>
```

## Mutation和Action

### 使用Mutation

```vue
<script setup>
import { useStore } from 'vuex'

const store = useStore()

// 基础mutation
const addToCart = (product) => {
  store.commit('addToCart', product)
}

// 带payload对象的mutation
const updateUser = (userData) => {
  store.commit('updateUser', {
    ...userData,
    timestamp: Date.now()
  })
}

// 模块mutation
const login = (credentials) => {
  store.commit('auth/login', credentials)
}
</script>
```

### 使用Action

```vue
<script setup>
import { useStore } from 'vuex'

const store = useStore()

// 基础action
const fetchProducts = async () => {
  await store.dispatch('fetchProducts')
}

// 带payload的action
const checkout = async (products) => {
  try {
    await store.dispatch('checkout', products)
    return true
  } catch (error) {
    console.error('Checkout failed:', error)
    return false
  }
}

// 模块action
const registerUser = async (userData) => {
  await store.dispatch('user/register', userData)
}
</script>
```

## 辅助函数

### 创建组合式辅助函数

```javascript
// store/helpers.js
import { computed } from 'vue'
import { useStore } from 'vuex'

export function useState(module, states) {
  const store = useStore()
  const stateComputed = {}

states.forEach(state => {
    stateComputed[state] = computed(() => {
      return module
        ? store.state[module][state]
        : store.state[state]
    })
  })

return stateComputed
}

export function useGetters(module, getters) {
  const store = useStore()
  const getterComputed = {}

getters.forEach(getter => {
    getterComputed[getter] = computed(() => {
      return module
        ? store.getters[`${module}/${getter}`]
        : store.getters[getter]
    })
  })

return getterComputed
}
```

### 使用辅助函数

```vue
<template>
  <div class="user-profile">
    <h2>{{ username }}</h2>
    <p>积分: {{ points }}</p>
    <p>等级: {{ userLevel }}</p>
    <button @click="updateProfile">更新资料</button>
  </div>
</template>

// 使用状态辅助函数
const { username, points } = useState('user', ['username', 'points'])

// 使用getter辅助函数
const { userLevel } = useGetters('user', ['userLevel'])

// 组合多个模块
const { cartItems } = useState('cart', ['items'])
const { totalPrice } = useGetters('cart', ['totalPrice'])
</script>
```

## TypeScript支持

### 定义Store类型

```typescript
// store/types.ts
export interface UserState {
  id: number | null
  username: string
  email: string
  profile: {
    avatar: string
    bio: string
  }
}

export interface RootState {
  user: UserState
  // 其他模块的状态类型
}

// store/index.ts
import { InjectionKey } from 'vue'
import { Store } from 'vuex'
import { RootState } from './types'

export const key: InjectionKey<Store<RootState>> = Symbol()
```

### 在组件中使用类型

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { key } from '@/store'
import type { UserState } from '@/store/types'

const store = useStore(key)

// 带类型的状态访问
const user = computed<UserState>(() => store.state.user)

// 带类型的mutation
const updateProfile = (profile: Partial<UserState['profile']>) => {
  store.commit('user/updateProfile', profile)
}

// 带类型的action
const fetchUserData = async (userId: number) => {
  const userData = await store.dispatch('user/fetchUser', userId)
  return userData as UserState
}
</script>
```

## 最佳实践

### 1. 使用组合式函数封装store逻辑

```typescript
// composables/useUser.ts
import { computed } from 'vue'
import { useStore } from 'vuex'

export function useUser() {
  const store = useStore()

const user = computed(() => store.state.user)
  const isLoggedIn = computed(() => store.getters['user/isLoggedIn'])

const login = async (credentials) => {
    await store.dispatch('user/login', credentials)
  }

const logout = async () => {
    await store.dispatch('user/logout')
  }

const updateProfile = async (profile) => {
    await store.dispatch('user/updateProfile', profile)
  }

return {
    user,
    isLoggedIn,
    login,
    logout,
    updateProfile
  }
}
```

### 2. 模块化组织

```typescript
// composables/useCart.ts
import { computed } from 'vue'
import { useStore } from 'vuex'

export function useCart() {
  const store = useStore()

const items = computed(() => store.state.cart.items)
  const total = computed(() => store.getters['cart/total'])
  const itemCount = computed(() => store.getters['cart/itemCount'])

const addItem = (item) => {
    store.commit('cart/addItem', item)
  }

const removeItem = (itemId) => {
    store.commit('cart/removeItem', itemId)
  }

const checkout = async () => {
    await store.dispatch('cart/checkout')
  }

return {
    items,
    total,
    itemCount,
    addItem,
    removeItem,
    checkout
  }
}
```

### 3. 错误处理

```typescript
import { ref } from 'vue'

export function useAsync(asyncFunction) {
  const loading = ref(false)
  const error = ref(null)

const execute = async (...args) => {
    loading.value = true
    error.value = null

try {
      const result = await asyncFunction(...args)
      return result
    } catch (e) {
      error.value = e
      throw e
    } finally {
      loading.value = false
    }
  }

return {
    loading,
    error,
    execute
  }
}

// 在组件中使用
const { loading, error, execute: doCheckout } = useAsync(useCart().checkout)
```

## 总结

本文详细介绍了在Vue3中使用组合式API风格操作Vuex的方法：

1. 基础用法：useStore的使用
2. 状态和Getter的访问方式
3. Mutation和Action的调用方式
4. 辅助函数的创建和使用
5. TypeScript的类型支持
6. 最佳实践和代码组织

通过使用组合式API，我们可以更好地组织Vuex相关的代码，提高代码的可维护性和复用性。建议在实际开发中根据项目需求选择合适的代码组织方式，合理使用组合式API来优化你的Vuex代码。

元素码农