......鍓嶈█杞彂锛佸墠杩涳紒鏃犺濡備綍閮借鍓嶈繘锛侊紒璺濈Vue3.0beta鍙戝竷宸茬粡鍗婁釜澶氭湀浜嗐€傛湰鏉ヨ繖涓笢瑗垮簲璇ユ槸涓婁釜鏈堝啓鐨勶紝鍥犱负涓婁釜鏈堝叕鍙告病鏃堕棿璧堕」鐩€傝秮鐫€鍔冲姩鑺傚啓浜嗚繖涓笢瑗匡紝椤轰究涔熻繃浜嗕竴浜涘潙銆備粙缁嶉〉闈㈡瘮杈冪畝鍗曘€傚畠琚涓哄凡缁忛€氳繃浜咰ompositionAPI銆傚熀浜嶸ue3.0beta锛岃繖涓〉闈篃姣旇緝鑰佸銆傛秹鍙奦ue3.0beta鍜孷uex4betaaxios瀹夎vue3鐜棰樺璇濓細鍚vite涓嶉敊锛岃繖鍑犲ぉ澶╁痉鎳備簡馃お瀹夎锛堝崌绾э級鏈€鏂扮殑vue-clivuecreateprojectNameps:濡傛灉涓嶇煡閬撴€庝箞鐢ㄦ墜鍔ㄥ畨瑁卾uex4鎴栬€卾ue-router4搴擄紝鏈€濂界洿鎺ュ叏閮ㄥ畨瑁咃紙鍑忓皯韪╁潙鐨勬椂闂存垚鏈級vueaddvue-next杩欎釜鍛戒护浼氳嚜鍔ㄥ皢椤圭洰涓殑涓€浜涗緷璧栧崌绾у埌鏀寔vue3鐨勭増鏈琻pmrunserveComposition-API杩欓噷鎺ㄨ崘闃呰鏂囨。https://vue-composition-api-rfc.netlify.app/#summary馃鐩存帴绮樿创姣曠珶鎬濊矾閮藉樊涓嶅锛屽鏋滃彲浠ュ缓璁綘鐩存帴鐪媓ttps://github.com/notbucai/vue3-demouseScrollimport{ref}from'vue';exportconstuseScrollTop=()=>{consttop=ref(0);window.addEventListener('scroll',()=>{constscrollTop=document.documentElement.scrollTop;top.value=scrollTop;});returntop;}storeimport{createStore}from"vuex";exportdefaultcreateStore({state:{shopcart:{},foodList:[],},getters:{//TODO:杩欓噷鐨勬暟閲忚绠楁槸鈥滄湁闂鐨勨€?/璁＄畻閲戦鍜屾暟閲忕粨绠?state){letallPrice=0;letallCount=0;constshopcart=state.shopcart;constfood鍒楄〃=state.foodList;//鑾峰彇鎵€鏈夐鐗╃殑鍒楄〃constfoods=foodList.reduce((previousValue,currentValue)=>{returnpreviousValue.concat(currentValue.foods);},[]);//閫氳繃璐墿杞﹁绠楁暟閲廞uantityObject.keys(shopcart).forEach(key=>{constcount=shopcart[key];if(!count)return;constfood=foods.find(item=>item.item_id==key);constprice=food.specfoods[0].price;//杩欏彧鏄鐞嗘诞鐐规暟鐨勭畝鍗曟柟妗堬紙涓嶄繚璇侊級锛屽叾瀹炲悗绔洿鎺ヤ互缇庡垎杩斿洖閲戦銆俒鍦ㄥ悗鍙拌绠楅噾棰濆湪鏌愪簺鎯呭喌涓嬪彲鑳芥洿鍙潬]allPrice+=(price*10000*count);allCount+=count;});杩斿洖{price:allPrice/10000,count:allCount,}}},mutations:{ADD_ITEM(state,id){state.shopcart[id]=state.shopcart[id]||0;state.shopcart[id]++;},SUB_ITEM(state,id){state.shopcart[id]=state.shopcart[id]]||0;state.shopcart[id]--;},SET_FOOD_LIST(state,payload){state.foodList=payload;}},actions:{setFoodList({commit},payload){commit('SET_FOOD_LIST',payload)},addItem({commit},id){commit('ADD_ITEM',id)},subItem({commit},id){commit('SUB_ITEM',id)},}});椤甸潰
