使用vue3+ts实现管理后台（增删改查）

简单的管理后台基本就是数据的增删改查。主要是list+form形式。每个页面的逻辑基本相同。区别在于每个页面需要调用的具体API和参数。以前做vue2最简单的方法就是把一个页面的逻辑写出来，然后直接copy到每个页面，修改API和参数。比较高级的是使用mixin功能，将可重用的逻辑分离出来，在每个页面中引入mixin。compositionAPI是在vue3之后加入的。本篇文章是使用compositionAPI，将可重用的逻辑抽取出来放到compositionAPI中，引入ts实现一个简单的管理后台功能。使用@vue/cli创建项目，首先需要将@vue/cli升级到最新版本。本文使用4.5.6版本。vuecreateadmincdadminnpmrunservecreateselect手动选择特性，会有一些交互选项，是否安装router，vuex等选项，空格可以切换是否选择。我们选择了TypeScript、Router、Vuex、CSS预处理器。我们使用axios+axios-mock-adapter+mockjs进行接口请求、接口模拟和假数据生成，然后安装这些包。npminstallaxiosnpminstall-Daxios-mock-adaptermockjs项目的整体框架假设我们的项目包含一个Header，Header的作用是切换页面。有两个页面，分别是List和About。这两个页面就是简单的列表+增删改查操作。路由需要在router中添加一个路由信息列表。constroutes:Array=[{path:'/',name:'Home',component:Home,},{path:'/about',name:'About',component:()=>{返回import(/*webpackChunkName:"about"*/'../views/About.vue');},},{path:'/list',name:'List',component:()=>{returnimport(/*webpackChunkName:"list"*/'../views/List.vue');},},];列表页先写出列表页的结构，List和About的结构大致类似。使用了addItem、editItem、deleteItem、confirm、cancel方法，这些方法在各个列表页的作用是一样的，唯一的区别是请求的API。我们可以将这些API作为参数，将增删改查的方??法提取到setup函数中，实现复用。接下来，我们来到密钥组合API。compositionAPI具体实现import{ref,onMounted}from'vue';import{ItemType,FetchType,DeleteType,AddType,EditType}from'../../types/index';exportconstcompositionApi=(fetchApi:FetchType,deleteApi:DeleteType,confirmAddApi:AddType,confirmEditApi:EditType,itemData:ItemType,)=>{constcurrentIndex=ref（空）；constlist=ref([{}]);constgetList=()=>{fetchApi().then((res:any)=>{list.value=res.data.list;});};constaddItem=()=>{list.value.unshift(itemData);currentIndex.value=0;};consteditItem=(index:number)=>{currentIndex.value=index;};constdeleteItem=(index:number,item:ItemType)=>{deleteApi(item).then(()=>{list.value.splice(index,1);//getList();});};constcancel=(item:ItemType)=>{currentIndex.value=null;如果(!item.id){list.value.splice(0,1);}};常量确认m=(item:ItemType)=>{constapi=item.id?confirmEditApi:confirmAddApi;api(item).then(()=>{getList();cancel(item);});};onMounted(()=>{getList();});返回{列表、currentIndex、getList、addItem、editItem、deleteItem、取消、确认、};};导出默认的compositionApi；下一步是在列表和关于页面中的设置方法中导入从'axios'导入axios；从'vue'导入{defineComponent，reactive}；从'../components/composables/index'导入{compositionApi}；从'..导入{ItemType}/types/index';constListComponent=defineComponent({name:'List',setup(){conststate=reactive({itemData:{id:'',name:'',sex:0,birth:'',地址:'',},});constfetchApi=()=>{returnaxios.get('/users');};constdeleteApi=(item:ItemType)=>{returnaxios.post('/users/删除',{id:item.id});};constconfirmAddApi=(item:ItemType)=>{returnaxios.post('/users/add',{name:item.name,birth:item.birth,地址:item.address,});};constconfirmEditApi=(item:ItemType)=>{returnaxios.post('/users/edit',{id:item.id,name:item.name,birth:item.birth，地址：item。地址，}）;};constlocalPageData=compositionApi(fetchApi,deleteApi,confirmAddApi,confirmEditApi,state.itemData);返回{状态,...localPageData,};},data(){return{thead:['id','name','sex','birth','address','option',],};}});这样List页面的逻辑就基本完成了，About页面的逻辑也完成了，不同的是改变了About页面的接口请求地址。compositionAPIvsMixin的最终效果vue3之前，mixin一般用于代码复用，但是mixin相比compositionAPI的劣势在官网解释如下：mixin容易冲突：因为每个特性的属性都合并到同一个组件中，因此您仍然需要了解所有其他功能，以避免属性名称冲突和调试。可复用性有限：我们不能给mixins传递任何参数来改变它的逻辑，这降低了它们抽象逻辑的灵活性中没有具体介绍，想了解的可以去看源码。戳这里：vue3_ts_admin