Vue 3进阶：Pinia状态管理与项目实战

// Vuex 4
const store = createStore({
  state: { count: 0 },
  mutations: { increment(state) { state.count++ } },
  actions: { async fetchCount({ commit }) { /* ... */ } }
})
// 组件中使用 computed + useStore + 映射辅助函数

// Pinia
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
})
// 组件中直接 useCounterStore()，天然响应式

// 1. Options Store（类似 Vuex 习惯）
export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  getters: { isLoggedIn: (state) => !!state.token },
  actions: { login(name: string) { this.name = name } }
})

// 2. Setup Store（推荐，拥抱 Composition API）
export const useUserStore = defineStore('user', () => {
  const name = ref('')
  const token = ref('')
  const isLoggedIn = computed(() => !!token.value)
  function login(userName: string) { name.value = userName }
  return { name, token, isLoggedIn, login }
})

// 3. 配合 script setup 使用
// <script setup lang="ts">
// const store = useUserStore()
// </script>

const store = useUserStore()

// 单个修改
store.name = 'Alice'

// 批量修改 - $patch 性能更优，只触发一次更新
store.$patch({
  name: 'Bob',
  token: 'abc123'
})

// 函数式 $patch（适合复杂逻辑）
store.$patch((state) => {
  state.name = 'Charlie'
  state.token = `token-${Date.now()}`
})

export const useProductStore = defineStore('product', () => {
  const products = ref<Product[]>([])

  // 普通 Getter
  const cheapProducts = computed(() =>
    products.value.filter(p => p.price < 100)
  )

  // 传参 Getter（返回函数，非缓存结果，但依赖数据响应式）
  const getProductById = computed(() => {
    return (id: number) => products.value.find(p => p.id === id)
  })

  return { products, cheapProducts, getProductById }
})

export const useOrderStore = defineStore('order', () => {
  const orders = ref<Order[]>([])
  const loading = ref(false)

  async function fetchOrders(userId: string) {
    loading.value = true
    try {
      const res = await api.getOrders(userId)
      orders.value = res.data
    } catch (err) {
      // 统一错误处理
      throw new Error(`获取订单失败: ${err}`)
    } finally {
      loading.value = false
    }
  }

  return { orders, loading, fetchOrders }
})

stores/
├── index.ts          # 创建 pinia 实例
├── user.ts           # 用户登录/权限
├── order.ts          # 订单相关
├── product.ts        # 商品/产品
└── app.ts            # 全局 UI 状态（侧边栏、主题等）

// stores/order.ts
import { useUserStore } from './user'
import { useProductStore } from './product'

export const useOrderStore = defineStore('order', () => {
  const orders = ref<Order[]>([])

  async function placeOrder(productId: number) {
    const userStore = useUserStore()
    const productStore = useProductStore()

    if (!userStore.isLoggedIn) {
      throw new Error('请先登录')
    }

    const product = productStore.getProductById(productId)
    if (!product || product.stock <= 0) {
      throw new Error('商品库存不足')
    }

    const res = await api.createOrder({
      userId: userStore.id,
      productId,
    })
    orders.value.unshift(res.data)
  }

  return { orders, placeOrder }
})

// stores/utils/withPagination.ts
export function withPagination<T>() {
  const list = ref<T[]>([])
  const page = ref(1)
  const pageSize = ref(20)
  const total = ref(0)

  async function load(fetcher: (p: number) => Promise<{ list: T[]; total: number }>) {
    const res = await fetcher(page.value)
    list.value = res.list
    total.value = res.total
  }

  return { list, page, pageSize, total, load }
}

// stores/product.ts
export const useProductStore = defineStore('product', () => {
  const pagination = withPagination<Product>()
  // 直接使用 pagination.list, pagination.load 等
  return { ...pagination }
})

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/Login.vue'),
      meta: { guest: true },        // 仅未登录可访问
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import('@/views/Dashboard.vue'),
      meta: { requiresAuth: true }, // 需登录
    },
    {
      path: '/admin',
      name: 'Admin',
      component: () => import('@/views/Admin.vue'),
      meta: { requiresAuth: true, role: 'admin' },
    },
  ],
})

// 全局前置守卫
router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore()

  // 自动恢复登录态（如从 localStorage 读取 token）
  if (!userStore.initialized) {
    await userStore.restoreSession()
  }

  if (to.meta.requiresAuth && !userStore.isLoggedIn) {
    return next({ name: 'Login', query: { redirect: to.fullPath } })
  }

  if (to.meta.guest && userStore.isLoggedIn) {
    return next({ name: 'Dashboard' })
  }

  if (to.meta.role && userStore.role !== to.meta.role) {
    return next({ name: 'Forbidden' })
  }

  next()
})

const routes = [
  {
    path: '/orders',
    component: () => import('@/views/OrderList.vue'),
    // 配合 webpackChunkName / Vite 的 rollupOptions 实现命名分包
  },
  // 嵌套路由懒加载
  {
    path: '/user',
    component: () => import('@/layouts/UserLayout.vue'),
    children: [
      { path: 'profile', component: () => import('@/views/user/Profile.vue') },
      { path: 'settings', component: () => import('@/views/user/Settings.vue') },
    ],
  },
]

// 登录后根据角色动态添加路由
const asyncRoutes = [
  {
    path: '/admin/users',
    name: 'AdminUsers',
    component: () => import('@/views/admin/Users.vue'),
    meta: { role: 'admin' },
  },
]

export function setupDynamicRoutes(role: string) {
  const router = useRouter()
  const routes = asyncRoutes.filter(r => r.meta.role === role)

  routes.forEach(route => {
    // 避免重复添加
    if (!router.hasRoute(route.name!)) {
      router.addRoute(route)
    }
  })
}

// ✅ 推荐：使用 defineProps 泛型
<script setup lang="ts">
interface UserCardProps {
  user: {
    id: number
    name: string
    avatar?: string
  }
  showEmail?: boolean
}

const props = defineProps<UserCardProps>()

// 定义 emits
const emit = defineEmits<{
  (e: 'click', id: number): void
  (e: 'delete', id: number): void
}>()
</script>

// types/index.ts
export interface User {
  id: number
  name: string
  email: string
  role: 'user' | 'admin'
}

export interface LoginPayload {
  email: string
  password: string
}

export interface ApiResponse<T> {
  code: number
  message: string
  data: T
}

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const currentUser = ref<User | null>(null)

  async function login(payload: LoginPayload): Promise<void> {
    const res = await api.post<ApiResponse<User>>('/auth/login', payload)
    currentUser.value = res.data.data
  }

  return { currentUser, login }
})

// composables/useCounter.ts
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }

  return { count, double, increment }
}

// 组件中使用时，count.value 自动推断为 number

// utils/http.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosError } from 'axios'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const http: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE,
  timeout: 10_000,
})

// 请求拦截器：注入 Token
http.interceptors.request.use((config) => {
  const userStore = useUserStore()
  if (userStore.token) {
    config.headers.Authorization = `Bearer ${userStore.token}`
  }
  return config
})

// 响应拦截器：统一错误处理
http.interceptors.response.use(
  (res) => res,
  (error: AxiosError<{ message: string }>) => {
    if (error.response?.status === 401) {
      const userStore = useUserStore()
      userStore.logout()
      window.location.href = '/login'
      return Promise.reject(error)
    }

    ElMessage.error(error.response?.data?.message || '请求失败')
    return Promise.reject(error)
  }
)

export default http

// api/user.ts
import http from '@/utils/http'
import type { ApiResponse, User, LoginPayload } from '@/types'

export const userApi = {
  login(data: LoginPayload) {
    return http.post<ApiResponse<{ token: string; user: User }>>('/auth/login', data)
  },
  getProfile() {
    return http.get<ApiResponse<User>>('/user/profile')
  },
  updateProfile(data: Partial<User>) {
    return http.put<ApiResponse<User>>('/user/profile', data)
  },
}

// api/order.ts
export const orderApi = {
  getList(params: { page: number; pageSize: number }) {
    return http.get<ApiResponse<Order[]>>('/orders', { params })
  },
  create(data: CreateOrderPayload) {
    return http.post<ApiResponse<Order>>('/orders', data)
  },
}

src/
├── api/              # API 层（按业务模块拆分）
├── assets/           # 静态资源（图片、样式）
├── components/       # 公共组件
│   ├── common/       # 基础组件（Button、Table 等）
│   └── business/     # 业务组件（UserCard、OrderList 等）
├── composables/      # 组合式函数
├── layouts/          # 布局组件
├── router/           # 路由配置（含导航守卫）
├── stores/           # Pinia Store
├── types/            # TypeScript 类型定义
├── utils/            # 工具函数
├── views/            # 页面级组件
│   ├── login/
│   ├── dashboard/
│   └── admin/
├── App.vue
└── main.ts

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'
import 'virtual:svg-icons-register'
import './styles/global.scss'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    // 自动导入 API（ref、computed 等无需手动 import）
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      resolvers: [ElementPlusResolver()],
    }),
    // 自动注册组件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // 打包体积分析
    visualizer({ open: false }),
  ],
  build: {
    rollupOptions: {
      output: {
        // 代码分割：第三方库分包
        manualChunks: {
          'vendor-vue': ['vue', 'vue-router', 'pinia'],
          'vendor-ui': ['element-plus'],
          'vendor-utils': ['axios', 'dayjs', 'lodash-es'],
        },
      },
    },
    // Tree-shaking
    treeshake: {
      preset: 'recommended',
    },
    // 移除 console/log
    minify: 'esbuild',
    sourcemap: false,
  },
  // 路径别名
  resolve: {
    alias: { '@': '/src' },
  },
})

// 构建产物示例
dist/
├── assets/
│   ├── index.abc123.js         # 主入口
│   ├── Login.def456.js         # 登录页
│   ├── Dashboard.ghi789.js     # 仪表盘
│   ├── vendor-vue.jkl012.js    # Vue 相关
│   └── vendor-ui.mno345.js     # UI 库

pnpm add -D vitest @vue/test-utils jsdom

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./vitest.setup.ts'],
  },
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') },
  },
})

// stores/__tests__/user.spec.ts
import { setActivePinia, createPinia } from 'pinia'
import { useUserStore } from '../user'
import { describe, it, expect, beforeEach } from 'vitest'

describe('useUserStore', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  it('初始状态为未登录', () => {
    const store = useUserStore()
    expect(store.isLoggedIn).toBe(false)
    expect(store.currentUser).toBeNull()
  })

  it('登录后更新状态', async () => {
    const store = useUserStore()
    await store.login({ email: 'test@example.com', password: '123456' })
    expect(store.isLoggedIn).toBe(true)
    expect(store.currentUser?.name).toBe('Test User')
  })
})

// components/__tests__/UserCard.spec.ts
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import UserCard from '../UserCard.vue'

describe('UserCard', () => {
  it('正确渲染用户信息', () => {
    const wrapper = mount(UserCard, {
      props: {
        user: { id: 1, name: 'Alice', avatar: '' },
        showEmail: false,
      },
    })
    expect(wrapper.text()).toContain('Alice')
    expect(wrapper.find('.email').exists()).toBe(false)
  })

  it('点击触发 emit', async () => {
    const wrapper = mount(UserCard, {
      props: { user: { id: 1, name: 'Alice' } },
    })
    await wrapper.trigger('click')
    expect(wrapper.emitted('click')?.[0]).toEqual([1])
  })
})

// stores/__tests__/order.spec.ts
import { setActivePinia, createPinia } from 'pinia'
import { useOrderStore } from '../order'
import { vi, describe, it, expect, beforeEach } from 'vitest'

// Mock API
vi.mock('@/api/order', () => ({
  orderApi: {
    getList: vi.fn().mockResolvedValue({
      data: { code: 0, data: [{ id: 1, amount: 100 }], total: 1 },
    }),
  },
}))

describe('useOrderStore', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  it('fetchOrders 填充订单列表', async () => {
    const store = useOrderStore()
    expect(store.orders).toHaveLength(0)

    await store.fetchOrders('user-1')
    expect(store.orders).toHaveLength(1)
    expect(store.orders[0].amount).toBe(100)
  })
})