我要投稿

Vue3组合式函数实战：企业级逻辑复用架构设计

资深开发工程师 vue3

2025-08-01 0 359

Vue3组合式函数实战：企业级逻辑复用架构设计

一、架构优势

组合式函数使业务逻辑复用率提升300%，代码维护成本降低60%

// 传统Options API vs 组合式函数
export default {        |  export function useUser() {
  data() { return {...} } |  const user = ref(null)
  methods: { ... }      |  const fetchUser = async () => {...}
}                      |  return { user, fetchUser }
                      |

二、核心设计

1. 基础组合函数

// useFetch.js
import { ref } from 'vue'

export function useFetch(url) {
    const data = ref(null)
    const error = ref(null)
    const loading = ref(false)

    const fetchData = async () => {
        loading.value = true
        try {
            const response = await fetch(url)
            data.value = await response.json()
        } catch (err) {
            error.value = err
        } finally {
            loading.value = false
        }
    }

    return { data, error, loading, fetchData }
}

2. 嵌套组合函数

// useAuth.js
import { useFetch } from './useFetch'

export function useAuth() {
    const { data: user, fetchData: fetchUser } = useFetch('/api/user')
    const isAdmin = computed(() => user.value?.role === 'admin')

    const login = async (credentials) => {
        await useFetch('/api/login').fetchData(credentials)
        await fetchUser()
    }

    return { user, isAdmin, login }
}

三、企业级实践

1. 权限管理系统

// usePermission.js
import { computed } from 'vue'
import { useAuth } from './useAuth'

export function usePermission() {
    const { user } = useAuth()
    const permissions = computed(() => user.value?.permissions || [])
    
    const hasPermission = (required) => {
        return computed(() => 
            permissions.value.includes(required) || 
            permissions.value.includes('admin')
        ).value
    }

    return { hasPermission }
}

2. 全局状态共享

// useStore.js
import { provide, inject } from 'vue'

const StoreSymbol = Symbol()

export function provideStore(store) {
    provide(StoreSymbol, store)
}

export function useStore() {
    const store = inject(StoreSymbol)
    if (!store) throw new Error('未注入Store!')
    return store
}

// 根组件
const store = reactive({...})
provideStore(store)

// 子组件
const store = useStore()

四、完整案例

数据分析看板系统

// useDashboard.js
import { ref, computed } from 'vue'
import { useFetch } from './useFetch'

export function useDashboard() {
    const dateRange = ref(['2023-01-01', '2023-12-31'])
    const { 
        data: rawData, 
        loading, 
        fetchData 
    } = useFetch('/api/analytics')

    const metrics = computed(() => {
        if (!rawData.value) return []
        return transformData(rawData.value, dateRange.value)
    })

    const refresh = () => fetchData({
        params: { 
            start: dateRange.value[0],
            end: dateRange.value[1]
        }
    })

    return { dateRange, metrics, loading, refresh }
}

// 组件使用
const { dateRange, metrics, refresh } = useDashboard()