Vue Hook Store 设计模式最佳实践指南

一、引言

在 Vue 3 组合式 API 与 TypeScript 普及的背景下，Hook Store 设计模式应运而生，它结合了 Vue 组合式 API 的灵活性与状态管理的最佳实践，为开发者提供了一种轻量级、可测试且易于维护的状态管理方案。本文将深入探讨 Vue Hook Store 的设计理念、核心模式与实战技巧，帮助开发者构建高质量的 Vue 应用。

二、Hook Store 设计模式核心概念

2.1 定义与核心优势

Hook Store 是一种基于 Vue 组合式 API 的状态管理模式，它将状态、逻辑与副作用封装在可复用的 hook 中，具有以下优势：

轻量级：无需额外依赖，仅使用 Vue 内置 API
高内聚：状态与逻辑紧密关联，提高代码可维护性
可测试性：纯函数式设计，易于编写单元测试
灵活组合：通过 hook 组合实现复杂状态管理

2.2 与传统状态管理方案对比

特性	Hook Store	Vuex/Pinia
学习曲线	低	中高
代码复杂度	低	中高
类型推导	优秀	良好
可测试性	优秀	良好
适用场景	中小型项目 / 模块	大型项目

三、Hook Store 基础架构

3.1 基本结构

一个典型的 Hook Store 包含以下部分：

// useCounter.ts
import { ref, computed, watch, type Ref } from 'vue'export interface CounterState {count: numbertitle: string
}export const useCounter = (initialState: CounterState = { count: 0, title: 'Counter' }) => {// 状态管理const state = ref(initialState) as Ref<CounterState>// 计算属性const doubleCount = computed(() => state.value.count * 2)// 方法const increment = () => {state.value.count++}const decrement = () => {state.value.count--}// 副作用watch(() => state.value.count, (newCount) => {console.log(`Count changed to: ${newCount}`)})// 导出状态与方法return {state,doubleCount,increment,decrement}
}

3.2 在组件中使用

<template><div><h1>{{ counterState.title }}</h1><p>Count: {{ counterState.count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">+</button><button @click="decrement">-</button></div>
</template><script setup>
import { useCounter } from './useCounter'const { state: counterState, doubleCount, increment, decrement } = useCounter()
</script>

四、Hook Store 高级模式

4.1 模块化设计

将不同业务领域的状态拆分为独立的 hook store：

src/stores/auth/useAuth.ts       # 认证状态useUserProfile.ts # 用户资料products/useProducts.ts   # 产品列表useCart.ts       # 购物车utils/useLocalStorage.ts # 本地存储工具

4.2 状态持久化

通过自定义 hook 实现状态持久化：

// utils/useLocalStorage.ts
import { ref, watch, type Ref } from 'vue'export const useLocalStorage = <T>(key: string, initialValue: T): Ref<T> => {const getSavedValue = () => {try {const saved = localStorage.getItem(key)return saved ? JSON.parse(saved) : initialValue} catch (error) {console.error(error)return initialValue}}const state = ref(getSavedValue()) as Ref<T>watch(state, (newValue) => {localStorage.setItem(key, JSON.stringify(newValue))}, { deep: true })return state
}

4.3 异步操作处理

在 hook store 中处理 API 请求：

// stores/products/useProducts.ts
import { ref, computed, type Ref } from 'vue'
import { fetchProducts } from '@/api/products'export interface Product {id: numbername: stringprice: number
}export interface ProductsState {items: Product[]loading: booleanerror: string | null
}export const useProducts = () => {const state = ref<ProductsState>({items: [],loading: false,error: null}) as Ref<ProductsState>const getProducts = async () => {state.value.loading = truestate.value.error = nulltry {const response = await fetchProducts()state.value.items = response.data} catch (error: any) {state.value.error = error.message} finally {state.value.loading = false}}const addProduct = (product: Product) => {state.value.items.push(product)}return {state,getProducts,addProduct}
}

4.4 状态共享与全局状态

使用 provide/inject 实现跨组件状态共享：

// stores/useGlobalState.ts
import { provide, inject, ref, type Ref } from 'vue'const GLOBAL_STATE_KEY = Symbol('globalState')interface GlobalState {theme: 'light' | 'dark'isSidebarOpen: boolean
}export const useProvideGlobalState = () => {const state = ref<GlobalState>({theme: 'light',isSidebarOpen: true}) as Ref<GlobalState>const toggleTheme = () => {state.value.theme = state.value.theme === 'light' ? 'dark' : 'light'}const toggleSidebar = () => {state.value.isSidebarOpen = !state.value.isSidebarOpen}provide(GLOBAL_STATE_KEY, {state,toggleTheme,toggleSidebar})return {state,toggleTheme,toggleSidebar}
}export const useGlobalState = () => {return inject(GLOBAL_STATE_KEY)!
}

在根组件中提供全局状态：

<!-- App.vue -->
<script setup>
import { useProvideGlobalState } from './stores/useGlobalState'useProvideGlobalState()
</script>

在子组件中使用：

<!-- ChildComponent.vue -->
<script setup>
import { useGlobalState } from './stores/useGlobalState'const { state, toggleTheme } = useGlobalState()
</script>

五、Hook Store 最佳实践

5.1 设计原则

单一职责：每个 hook store 只负责一个明确的业务领域
最小暴露：只暴露必要的状态和方法
组合优先：通过组合多个 hook store 实现复杂功能
类型安全：充分利用 TypeScript 提供类型保障

5.2 测试策略

使用 vitest 和 @vue/test-utils 编写单元测试：

// __tests__/useCounter.test.ts
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { useCounter } from '../useCounter'describe('useCounter', () => {it('should initialize with default values', () => {const { state } = useCounter()expect(state.value.count).toBe(0)expect(state.value.title).toBe('Counter')})it('should increment count', () => {const { state, increment } = useCounter()increment()expect(state.value.count).toBe(1)})it('should decrement count', () => {const { state, decrement } = useCounter()decrement()expect(state.value.count).toBe(-1)})it('should compute double count', () => {const { state, doubleCount } = useCounter()state.value.count = 5expect(doubleCount.value).toBe(10)})it('should log count changes', () => {const consoleLogSpy = vi.spyOn(console, 'log')const { state } = useCounter()state.value.count = 10expect(consoleLogSpy).toHaveBeenCalledWith('Count changed to: 10')consoleLogSpy.mockRestore()})
})

5.3 性能优化

使用 shallowRef 代替 ref 存储大型对象，避免深层响应式开销
使用 readonly 包装状态，防止意外修改
在大型列表场景中使用 reactive 而非 ref 包裹数组
使用 computed 缓存复杂计算结果

import { shallowRef, readonly, computed } from 'vue'export const useLargeDataStore = () => {// 使用shallowRef存储大型数据const largeList = shallowRef<Item[]>([]) as Ref<Item[]>// 使用readonly防止外部修改const readonlyList = readonly(largeList)// 使用computed缓存计算结果const filteredList = computed(() => largeList.value.filter(item => item.active))return {readonlyList,filteredList}
}

六、应用案例：完整的 Todo 应用

6.1 项目结构

src/stores/todos/useTodos.ts        # Todo列表管理useFilter.ts       # 过滤状态useLocalStorage.ts # 本地存储components/TodoList.vueTodoItem.vueTodoFilter.vueApp.vue

6.2 Todo Store 实现

// stores/todos/useTodos.ts
import { ref, computed, type Ref } from 'vue'
import { useLocalStorage } from './useLocalStorage'export interface Todo {id: numbertext: stringcompleted: boolean
}export const useTodos = () => {// 使用localStorage持久化存储const todos = useLocalStorage<Todo[]>('todos', [])const addTodo = (text: string) => {const newTodo: Todo = {id: Date.now(),text,completed: false}todos.value.push(newTodo)}const toggleTodo = (id: number) => {const todo = todos.value.find(t => t.id === id)if (todo) {todo.completed = !todo.completed}}const deleteTodo = (id: number) => {todos.value = todos.value.filter(t => t.id !== id)}const clearCompleted = () => {todos.value = todos.value.filter(t => !t.completed)}return {todos,addTodo,toggleTodo,deleteTodo,clearCompleted}
}

6.3 过滤状态管理

// stores/todos/useFilter.ts
import { ref, computed, type Ref } from 'vue'export type Filter = 'all' | 'active' | 'completed'export const useFilter = () => {const currentFilter = ref<Filter>('all') as Ref<Filter>const setFilter = (filter: Filter) => {currentFilter.value = filter}return {currentFilter,setFilter}
}

6.4 组合使用

<!-- TodoList.vue -->
<template><div><input v-model="newTodoText" @keyup.enter="addTodo" placeholder="Add todo" /><button @click="addTodo">Add</button><div><FilterButton :filter="'all'" /><FilterButton :filter="'active'" /><FilterButton :filter="'completed'" /></div><ul><TodoItem v-for="todo in filteredTodos" :key="todo.id" :todo="todo" /></ul><button @click="clearCompleted">Clear Completed</button></div>
</template><script setup>
import { ref, computed } from 'vue'
import { useTodos } from '@/stores/todos/useTodos'
import { useFilter } from '@/stores/todos/useFilter'
import TodoItem from './TodoItem.vue'
import FilterButton from './FilterButton.vue'const { todos, addTodo, clearCompleted } = useTodos()
const { currentFilter } = useFilter()
const newTodoText = ref('')const filteredTodos = computed(() => {switch (currentFilter.value) {case 'active':return todos.value.filter(todo => !todo.completed)case 'completed':return todos.value.filter(todo => todo.completed)default:return todos.value}
})
</script>