企业官网建设流程全解析

一、Composition API 不是把代码都塞进 setup

Vue3 的组合式 API 解决了 Options API 在复杂组件里逻辑分散的问题，但也带来常见问题：状态、请求、监听、表单校验都堆进setup，组件变成几百行。它的价值在于按业务能力组织代码，而不是换写法继续堆组件。

判断是否该抽 composable，可以看三个信号：能否跨组件复用，是否包含独立副作用，是否能单独测试。只为少写几行而抽函数，会让状态来源变模糊。组件负责视图结构和交互编排，数据获取、分页、筛选可拆出去。

二、把列表页逻辑抽成 composable

下面是一个订单列表 composable。它管理查询条件、加载状态、分页和请求。组件调用useOrderList后把状态绑定到模板。真实项目里，fetchOrders应来自独立 api 模块。

import{reactive,ref}from'vue'typeOrder={id:numberstatus:stringamount:numbercreatedAt:string}typeQuery={keyword:stringstatus:stringpage:numberpageSize:number}exportfunctionuseOrderList(){constloading=ref(false)constrows=ref<Order[]>([])consttotal=ref(0)constquery=reactive<Query>({keyword:'',status:'',page:1,pageSize:20,})asyncfunctionload(){loading.value=truetry{constres=awaitfetchOrders({...query})rows.value=res.items total.value=res.total}finally{loading.value=false}}functionsearch(){query.page=1returnload()}return{loading,rows,total,query,load,search}}

组件侧保持简单。模板和交互在组件里，数据逻辑放到 composable。

<script setup lang="ts"> import { onMounted } from 'vue' import { useOrderList } from '@/composables/useOrderList' const { loading, rows, total, query, load, search } = useOrderList() onMounted(load) </script>

三、全局状态不要滥用

Pinia 很好用，但不是所有状态都要放全局。搜索框、弹窗开关、当前页码属于局部状态；用户信息、权限、主题更适合放 store。

import{defineStore}from'pinia'exportconstuseUserStore=defineStore('user',{state:()=>({id:0,name:'',roles:[]asstring[],}),getters:{isAdmin:(state)=>state.roles.includes('admin'),},actions:{asyncloadCurrentUser(){constuser=awaitfetchCurrentUser()this.id=user.idthis.name=user.namethis.roles=user.roles},},})

store 里的 action 也要控制职责。它可以加载当前用户，但不应该直接操作页面表格的筛选条件。

四、组件拆分要按交互边界

Vue 组件不是越碎越好。一个按钮、一行文字都拆组件，会让项目充满透传 props 和事件；一个页面全写在一起也难维护。合理边界是业务含义、交互状态、复用和测试。

OrderPage.vue ├─ OrderFilters.vue ├─ OrderTable.vue └─ OrderDetailDrawer.vue

实践建议：Vue3 项目先约定状态放置规则，再写组件。页面局部状态留在组件或 composable，跨页面状态放 Pinia，请求放 api 模块，表单和表格抽 composable。组合式 API 的重点是让逻辑有边界。

如果你正在学习云原生或搭建个人项目，推荐试试腾讯云轻量应用服务器，新用户专享优惠，一键部署开发环境非常方便：点击查看优惠