鑰佸ぇ鍙堟潵BT闇€姹備簡馃槼鎴戜滑鍏徃鏈€杩戝紑鍙戜簡涓€娆総odo绠＄悊浜у搧锛寁ue3+axios锛屼簨鎯呮槸杩欐牱鐨勩€傝€佹澘锛氭垜璇曠敤浜嗘垜浠琤eta鐗堢殑浜у搧锛屾暣浣撳疄鐜拌繕鏄笉閿欑殑锛屼絾鏄?..鍒楄〃椤电炕浜嗭紵娣诲姞鍜岀紪杈戝緟鍔炰簨椤规椂鍙互鍋滄绛夊緟鍚楋紵鎴戯紙蹇冩兂锛夛細鉂撯潛鉂撹繖鏄璺宠繃璺熸湇鍔″櫒浜や簰鐨勯樁娈靛悧锛熶慨涓嶄簡鎴戯紒鑰佹澘锛氬皬浼欏瓙锛屾垜鐪嬪ソ浣犮€傛槑澶╁彲浠ョ湅涓€鏈熷悧锛熸垜锛氭垜鈥︹€︽垜璇曡瘯锛佹垜绐佺劧鐏垫満涓€鍔ㄣ€傚叧浜庣炕椤电灛闂存樉绀烘暟鎹殑闂锛屾垜浠兘涓嶈兘鍏堣姹傚綋鍓嶉〉闈㈢殑鏁版嵁锛岀劧鍚庡仛涓€涓紦瀛橀鍔犺浇涓嬩竴椤电殑鏁版嵁锛屾悶瀹氬惂锛屼唬鐮佸ぇ姒傛槸杩欐牱锛?/todoListcomponentconstcurrentPage=ref(1);constpageCache={};constloading=ref(false);//濡傛灉鏈夌紦瀛橈紝杩斿洖缂撳瓨锛屽鏋滄病鏈夛紝璇锋眰鏁版嵁骞剁紦瀛榗onstgetPageData=asyncpage=>{璁﹑ageData=pageCache[page];濡傛灉(!pageData){loading.value=true;pageData=awaitaxios.get('...',{params:{page:page,pageSize:10,}});loading.value=false;pageCache[page]=pageData;}returnpageData;};//杩涘叆鏃讹紝璇锋眰褰撳墠椤甸潰鏁版嵁锛屽苟棰勫姞杞戒笅涓€椤垫暟鎹甤onsttodoList=ref([]);constloadNextPage=async()=>{constpageData=awaitgetPageData(currentPage.value);todoList.value.push(pageData);褰撳墠椤甸潰.value++;getPageData(currentPage.value);};onMounted(loadNextPage);window.addEventListener(()=>{if(/*鍒ゆ柇婊戝埌搴曢儴...*/){loadNextPage();}});瀵逛簬涓嶇瓑寰呮坊鍔犲拰缂栬緫todos鐨勯棶棰橈紝閫氳繃update浜嬩欢锛岀劧鍚庢垜鐩存帴涔愯鍦版洿鏂?/缂栬緫todo缁勪欢constaddTodo=newTodoData=>{axios.post('...',newTodoData).then().then(newId=>{//鍝嶅簲鍚庯紝灏嗗師鏉ョ殑todoitem鏇挎崲涓篿d涓簍his.$emit('replaceTodo',{search:newTodoData,replacement:{id:newId,...newTodoData,}});});//棣栧厛绔嬪嵆娣诲姞鍒皌odoListthis.$emit('addTodo',newTodoData);alert('鎻愪氦鎴愬姛');}鐪嬫潵涓€鍒囬兘杩欎箞瀹岀編锛岃€佹澘搴旇琛ㄦ壃鎴戯紝鎴戠湡鐨別mo馃槻鑰佹澘锛氭垜鍒氭墠缃戠粶涓嶆槸寰堝ソ锛屾樉绀烘彁浜ゆ垚鍔燂紝浣嗘槸浼间箮骞舵病鏈夌湡姝ｆ垚鍔燂紝涔熶笉绋冲畾銆?.鎴戯細濂界殑鑰佹澘锛屾垜鍥炲幓鐪嬬湅馃様馃様馃様鑰佹澘锛氬浜嗭紝瑕佹槸鑳戒笉涓婄綉灏辨洿濂戒簡銆傛垜锛氬ソ鑰佹澘锛侌煒€馃榾馃榾锛堝湪鎴戝績閲岋細浠€涔堬紵锛燂紵馃が馃が馃が锛夌湡鏄竴鍥㈢碂锛侊紒锛侊紵缁忚繃涓€鐣縺鐑堢殑璁ㄨ鍜岃剳鐗堟湰鐨勬礂绀硷紝鎴戜滑缁堜簬鎯冲嚭浜嗕竴涓柟妗堛€傛垜浠噯澶囧ソ浜嗭細璁╂病鏈夎姹傛垚鍔熺殑璇锋眰淇℃伅鍏堜繚瀛樺湪鏈湴锛岀劧鍚庣洿鎺ュ皢璇锋眰淇℃伅绂荤嚎淇濆瓨涓€瀹氭椂闂翠繚瀛樺湪鏈湴锛岀劧鍚庡湪鑱旂綉鐘舵€佷笅鎻愪氦馃槑馃槑馃槑瀹岀編锛侊紒锛?/浠ｇ爜鏈夌偣闀匡紝鎴戣嚜宸辫ˉ銆傘€傘€係B澶т浆鍙堟潵浜嗐€傝€佹澘锛氬搱鍝堬紝濂藉儚姣斾互鍓嶅ソ澶氫簡銆傜偣鍑芥暟銆佺毊鑲ゅ嚱鏁般€佽鍗曞嚱鏁拌兘涓嶈兘鐢ㄤ綘浠殑缂撳瓨瑙ｅ喅鏂规銆傛垜锛氿煠煠煠㈣€佹澘锛氬摝瀵逛簡锛屾垜浠悗闈細鍋歱ad鐗堢殑銆傘€傘€傛垜浠喅瀹氭妸瀹冨皝瑁呮垚涓€涓簱鍓嶇缁勯暱锛氬摝锛岃阿璋綘鐨勮緵鍕ゅ伐浣滐紝鎴戝氨鎶婅繖浠朵簨浜ょ粰浣犮€傛棦鐒惰鍋歫s搴擄紝灏卞緱浠旂粏鑰冭檻杩欎簺闂銆傛娊璞″埌浠€涔堢▼搴︽墠鑳芥兜鐩栨洿澶氱殑鍦烘櫙锛熷墠绔柊鎵嬭兘鍚﹀揩閫熶笂鎵嬶紵璇锋眰鐩稿叧鐨勭姸鎬佸緢澶氬緢澶嶆潅锛屾槸鍚︿篃鍙互缁熶竴绠＄悊锛熷叕鍙镐互鍚庡彲鑳戒細鏈塺eact椤圭洰锛岃兘涓嶈兘鍏煎鍦ㄤ竴璧凤紵涔﹂潰鍥句功棣嗕笉瀹滃お澶с€傛垜锛氬ソ鐨勭粍闀匡紝杩欏鎴戞潵璇翠篃鏄竴涓寫鎴樸€傛垜鍙互鐢宠涓や釜鏈堟潵绮惧績璁捐銆傪煠煠煠ㄥ墠绔粍闀匡細濂戒簡锛屽姩鎵嬪惂锛屽皬浼欏瓙锛侊紒锛侌煒氿煒氿煒氫絾杩欑湡鐨勫緢鐓庣啲锛屼篃寰堟寫鎴橈紝瑕佹敮鎸佺殑鏉′欢鍙堥偅涔堝銆傛尃浜嗘尃澶存兂浜嗘兂锛屽緱鍒扮殑缁撴灉鏄細鑴戣瓒婃潵瓒婂噳馃樁馃樁馃樁锛屼絾杩樻槸瑕佺户缁紒锛侊紒鎯冲嚭浜嗕竴涓姹傚満鏅鐞嗙殑姒傚康缁忚繃涓€鐣嫤鎬濆啣鎯筹紝缁堜簬浜や簡绋垮瓙锛屾兂鍑轰簡涓€涓姹傚満鏅鐞嗙殑姒傚康銆備粈涔堟槸璇锋眰鍦烘櫙绠＄悊锛熷ぇ姒傛槸杩欐牱銆傛垜浠湪鍙戣捣璇锋眰鐨勬椂鍊欐€讳細閬囧埌杩欎簺闂锛氫粈涔堟椂鍊欏彂閫佽姹傦紱鏄惁鏄剧ず璇锋眰鐘舵€侊紱鏄惁灏佽鎴愯姹傚嚱鏁帮紝閲嶅璋冪敤锛涘浣曞鐞嗗搷搴旀暟鎹紱鏄惁浣跨敤楂橀鍝嶅簲鏁版嵁濡備綍鍋氱紦瀛橈紱濡備綍璺ㄩ〉闈㈡搷浣滄暟鎹紱鎮ㄨ繕鍙互绂荤嚎鎻愪氦鏁版嵁鍚楋紵...鑰宖etch鎴栬€卆xios寰€寰€鏇村叧娉ㄥ浣曚笌鏈嶅姟鍣ㄨ繘琛屼氦浜掞紝浣嗘垜浠€绘槸闇€瑕佽嚜宸卞鐞嗕笂杩伴棶棰橈紝杩欎簺鏈夌泭浜庡簲鐢ㄦ€ц兘鍜岀ǔ瀹氭€х殑鐗规€ф€绘槸鑳借绋嬪簭鍛樼紪鍐欏嚭浣庣淮鎶ょ殑浠ｇ爜.璇锋眰鍦烘櫙绠＄悊鏄皢鍑嗗璇锋眰鍒板鐞嗗搷搴旀暟鎹殑鎵€鏈夌幆鑺傝繘琛屾娊璞★紝浠庤€屼粠鍓嶇鐨勮搴﹁鐩栨暣涓狢S浜や簰鐢熷懡鍛ㄦ湡鐨勬ā鍨嬨€侰S浜や簰锛氫竴鑸寚鎵€鏈夊鎴风绫诲瀷涓庢湇鍔＄涔嬮棿鐨勬暟鎹氦浜掞紝鐩存帴鍦ㄦā鍨嬪浘涓婅繘琛屻€侫lova璇炵敓浜嗘牴鎹姹傚満鏅鐞嗙殑閫昏緫锛屾垜浠畬鎴愪簡杩欎釜鍚嶄负alova鐨刯s搴擄紝瀹冨氨鍍忎竴涓姹傚簱鐨勯摖鐢诧紝甯姪鎴戜滑浣跨敤璇锋眰搴撳彂璧疯姹傦紝浠ュ搷搴旂姸鎬佺殑褰㈠紡绠＄悊璇锋眰鐩稿叧鏁版嵁锛屾垜浠皢鍏跺畾浣嶄负瀵筧xios绛塺equest绫诲簱鐨勮ˉ鍏咃紝鑰屼笉鏄浛浠ｃ€傚搱鍝堬紝杩欎簺閮芥槸鎴戝仛鐨勶紒锛侊紒馃ぃ馃ぃ馃ぃ鉁呮娊璞¤鐩栨洿澶氬満鏅渽绫讳技axios鐨凙PI锛屽墠绔柊鎵嬩篃鑳藉揩閫熶笂鎵嬪悓鏃朵篃鍏煎鍏徃鍚庣画鐨剅eact椤圭洰鉁呭帇缂╁悗3+kb锛屽綋鐒跺姛鑳借繙涓嶆浜庢锛侊紒锛佽繕鏈夎繖浜涳細鉁呰姹傜殑闈炲紓姝ユ柟寮忊渽鍝嶅簲鏁版嵁缂撳瓨鉁呮暟鎹鍙?..alova鍥句功棣嗕紶閫侀棬鏉ヤ簡锛侊紒锛侊紝璇蜂笉瑕佹棤鐭ワ紝鐐瑰嚮寮€濮嬸煠ｐ煠ｐ煠ｇ劧鍚庢垜浠殑寰呭姙浜嬮」鍒楄〃鏄剧ず灏卞彲浠ユ敼鎴愯繖鏍蜂簡銆傚厛鍒涘缓涓€涓猘lova瀹炰緥锛屾槸涓嶆槸寰堝儚鍒涘缓涓€涓猘xios瀹炰緥//api/index.jsexportconstalovaInstance=createAlova({baseURL:'https://api.alovajs.org',//Vue椤圭洰閫氳繃缁橵ueHook,react椤圭洰浼犲叆ReactHookstatesHook:VueHook,//浼犲叆涓€涓猺equestadapter,GlobalFetch鏄垜浠彁渚涚殑fetchapiadapter//濡傛灉鎯充娇鐢╝xios涔熷彲浠ヨ嚜瀹氫箟涓€涓猘dapterrequestAdapter:GlobalFetch(),//鏄笉鏄湁鐐圭啛鎮夌殑鍛抽亾beforeRequest(config){config.headers.token='tokenxxx';},asyncresponded(response){constjson=awaitresponse.json();if(json.code!==200){thrownewError(json.message);}returnjson.data;},});瀹氫箟璇锋眰鍑芥暟銆?/api/todo.js//鍒涘缓璇锋眰瀵硅薄exportconstgetTodoList=page=>alovaInstance.Get('...',{params:{page,pageSize:10,},localCache:50000,});finally鍦ㄧ粍浠朵腑鍙戝嚭璇锋眰銆?/TodoList.vueconstcurrentPage=ref(1);consttodoList=ref([]);//鍒涘缓棰勫姞杞藉櫒const{fetch}=useFetcher();const{loading,data:pageData,error,onSuccess,//鐩戝惉褰撳墠椤甸潰鍙樺寲骞惰Е鍙戣姹倉=useWatcher(()=>getTodoList(currentPage.value),[currentPage],{immediate:true});onSuccess(rawPageData=>{todoList.value.push(rawPageData);//璇锋眰鎴愬姛鍚庨鍔犺浇涓嬩竴椤垫暟鎹紝骞剁紦瀛榝etch(getTodoList(currentPage.value+1));});window.addEventListener(()=>{if(/*鍒ゆ柇婊戝埌搴曢儴...*/){//椤电爜鍙樺寲锛岃嚜鍔ㄥ彂璧疯姹傦紝鐒跺悗鍛戒腑缂撳瓨锛岀珛鍗宠皟鐢╫nSuccesscurrentPage.value++;}});鏃犻渶绛夊緟缃戠粶涓婂緟鍔炰簨椤圭殑鍒涘缓銆傛槸杩欐牱鐨勩€傚紑鍚潤榛樻ā寮忓悗锛岀绾夸緷鐒跺彲浠ユ甯歌繘琛屻€傚垱寤簍odo璇锋眰鍑芥暟瀹氫箟//api/todo.js//鍒涘缓璇锋眰瀵硅薄exportconstcreateTodo=newTodo=>alovaInstance.Post('...',newTodo);鍗曞嚮鍒涘缓鎸夐挳鍚庨潤榛樻彁浜ゃ€俢onstnewTodo=reactive({title:'',time:'',});const{send:requestCreateTodoonSuccess}=useRequest(()=>createTodo(newTodo),{//涓嶆槸绔嬪嵆璁剧疆璇锋眰锛岃€屾槸閫氳繃璋冪敤send鍑芥暟鍙戣捣锛屽嵆鎵嬪姩妯″紡immediate:false,//璁剧疆涓洪潤榛樻彁浜ゆā寮弒ilent:true,});//闈欓粯鎻愪氦鏃讹紝鎴愬姛鍥炶皟浼氱珛鍗虫墽琛宱nSuccess(()=>{//鍦ㄨ繖閲屾墜鍔ㄦ洿鏂版柊鐨則odoitem鍒皌odoListupdateState(getTodoList(),todoList=>{return[...todoList,{//鐪嬪埌浜嗗悧锛燄煠煠煠╋紝杩欐槸寤惰繜鏇存柊鏁版嵁鐨勬柟寮?+id':resData=>resData.id,...newTodo,}]});});//鍋囪杩欎釜鍑芥暟鍗曞嚮鈥滃垱寤衡€濇寜閽悗瑙﹀彂consthandleCreateTodoBtnClick=()=>{requestCreateTodo();};闈欓粯鎻愪氦鎿嶄綔瀹屾垚銆傚浘涓湁寤惰繜鏁版嵁鏇存柊鐨勫姛鑳姐€傛垜瑕佽В閲婁竴涓嬶紙鍒掗噸鐐桂煐嶐煐嶐煐嶏級銆傚畠灏卞儚涓€涓崰浣嶇锛屽彲浠ヨ纭鐨勬暟鎹珛鍗虫洿鏂板埌鐩稿簲鐨勫弽搴旂姸鎬侊紝鍙互绔嬪嵆閲嶆柊娓叉煋鐣岄潰锛岀◢鍚庤姹傚搷搴斿悗鍙互灏嗗崰浣嶇鏇挎崲涓哄疄闄呮暟鎹€傜ず渚嬩腑todoitem鍦ㄥ垱寤簍odoitem鏃剁珛鍗虫洿鏂颁负todolist鏁版嵁锛屾彁浜ゆ垚鍔熷悗鍏秈d浼氳嚜鍔ㄦ浛鎹负瀹為檯id锛屽疄鐜版棤寤惰繜鏁版嵁鎻愪氦銆傪煒冭繖娆℃垜浠€佹澘缁堜簬寮€蹇冧簡锛佺劧鍚庯紝鎴戜滑鑺变簡涓€浜涙椂闂寸敤alova鏀归€犱簡椤圭洰鐨勫涓鐐癸紝閮藉彇寰椾簡涓嶉敊鐨勬晥鏋滐紝鎴戜滑閮界瑧浜嗭紒锛侊紒鐗瑰埆鏄€佹澘馃馃馃銆傝€佹澘锛氬皬浼欏瓙锛屼綘鍋氬緱寰堝ソ銆傛垜鎯虫巿浜堜綘涓€鏋氬媼绔犮€傛垜浠殑浜у搧浣撻獙姣斾互鍓嶆洿涓婁竴灞傛ゼ浜嗭紒鎴戯細馃樁馃樁馃樁鑰佹澘锛屼綘鍒啿鍔紒锛侊紒鎴栬€呪€︹€﹀缁欐垜鍙戜袱涓囧閲戝氨鍙互浜嗏€︹€﹁€佹澘锛氫綘鎯虫斁灞侊紒锛侊紒馃槻馃槻馃槻鍓嶇缁勯暱锛氫綘鍦ㄦ兂灞侊紒锛侊紒馃槻馃槻馃槻鎴戯細寮€鐜╃瑧锛屽紑鐜╃瑧锛岃鎴戝綋缁勯暱鍚ю煠煠煠墠绔粍闀匡細鎴?..qnmlgb锛佸悇浣嶈鑰咃紝鎮ㄥ浣曠湅寰呰繖涓兂娉曪紵璁╂垜鐪嬬湅浣犱滑鐨勬墜馃檶馃徎馃檶馃徎馃檶馃徎鍐嶄竴娆★紝闃挎礇鐡﹀浘涔﹂闂ㄦ埛缃戠珯鏉ヤ簡锛侊紒锛侊紝璇蜂笉瑕佹棤鐭ョ殑濂夋壙锛岀偣鍑诲紑濮嬸煠楌煠楌煠?/p>
