Vue3宸茬粡鍙戝竷浜嗕竴娈垫椂闂达紝瀹冮噰鐢ㄤ簡鏂扮殑鍝嶅簲寮忕郴缁燂紝骞舵瀯寤轰簡鏂扮殑CompositionAPI銆俈ue鐨勫懆杈圭敓鎬佹鍦ㄥ姞绱ч€傞厤杩欎釜鏂扮郴缁燂紝瀹樻柟鐨勭姸鎬佺鐞嗗簱Vuex涔熷湪閫傞厤涓€備负姝わ紝瀹樻柟鎻愬嚭浜哣uex5鐨勬柊鎻愭锛屾敮鎸佷袱绉嶈娉曞垱寤篠tore锛歄ptionsApi鍜孋ompositionApi锛涘垹闄ょ獊鍙橈紝鍙敮鎸佺姸鎬併€佸惛姘斿墏銆佸姩浣滐紱妯″潡鍖栬璁★紝鍙互寰堝ソ鐨勬敮鎸佷唬鐮佹媶鍒嗭紱娌℃湁宓屽妯″潡锛屽彧鏈塖tore鐨勬蹇碉紱瀹屾暣鐨凾ypeScript鏄殑锛涙彁妗堜笅鏈変竴鏉℃湁瓒ｇ殑璇勮銆傜畝鍗曠炕璇戯細宸у悎鐨勬槸锛孷uex5鎻愭涓嶱inia瀹炵幇鐨勫姛鑳芥病鏈変换浣曞叧绯伙紝鍙兘璇存槸涓€妯′竴鏍枫€備粖澶╃殑鏂囩珷灏辩粰澶у浠嬬粛涓€涓嬭繖娆捐彔钀濄€傚湪鐜版湁椤圭洰涓畨瑁咃紝浣跨敤浠ヤ笅鍛戒护瀹夎Pinia妯″潡銆?yarnyarnaddpinia@next#npmnpmipinia@next瀹夎瀹屾垚鍚庯紝闇€瑕佸湪Vue3椤圭洰鐨勫叆鍙ｆ枃浠朵腑瀵煎叆瀹夎銆?/main.jsimport{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'//瀹炰緥鍖朧ueconstapp=createApp(App)//瀹夎Piniaapp.use(createPinia())//鎸傝浇鍒扮湡姝ｇ殑DOMapp.mount('#app')瑕佷娇鐢≒inia锛屽彧闇€瑕佸畾涔変竴涓猻tore锛岀劧鍚庡湪浣跨敤鐨勫湴鏂瑰鍏ユ暟鎹嵆鍙€俤efineStoreimport{defineStore}from"pinia"//瀵瑰鏆撮湶涓€涓猽se鏂规硶锛屼細瀵煎嚭鎴戜滑瀹氫箟鐨剆tateconstuseCounterStore=defineStore({//姣忎釜store鐨刬d蹇呴』鏄敮涓€鐨刬d:'counter',//staterepresentationDatasourcestate:()=>({count:0}),//getters绫讳技浜巆omputed锛屽彲浠ュstate鍊艰繘琛屼簩娆¤绠梘etters:{double(){//getter涓殑this鎸囧悜馃憠statereturnthis.count*2},//濡傛灉浣犱娇鐢ㄧ澶村嚱鏁帮紝杩欎細瀵艰嚧闂//浣犲彲浠ュ湪鍑芥暟鐨勭涓€涓弬鏁颁腑鑾峰彇statedouble:(state)=>{returnstate.count*2}},//actions鐢ㄤ簬淇敼stateactions:{increment(){//thisinaction鎸囧悜馃憠statethis.count++},}})exportdefaultuseCounterStore闄や簡浣跨敤涓婇潰鎻愬埌鐨剉uex-鍜屾瀯寤簊tate鐨勬柟寮忎竴鏍凤紝涔熷彲浠ヤ娇鐢╢unction鐨勫舰寮忔潵鍒涘缓store锛屾湁鐐圭被浼间簬Vue3涓殑setup()銆俰mport{ref,computed}from"vue"import{defineStore}from"pinia"//瀵瑰鏆撮湶涓€涓猽se鏂规硶锛屼細瀵煎嚭鎴戜滑瀹氫箟鐨剆tateconstuseCounterStore=defineStore('counter',function(){constcount=ref(0)constdouble=computed(()=>count.value*2)functionincrement(){count.value++}return{count,double,increment}})exportdefaultuseCounterStore鍦ㄤ娇鐢⊿tore涔嬪墠涔熶粙缁嶈繃锛屾彁渚涜€匬inia鏈変袱绉嶄娇鐢╯tore鐨勬柟寮忥紝鍦∣ptionsApi鍜孋ompositionApi涓兘瀹岀編鏀寔銆侽ptionsApi鍦∣ptionsApi涓紝鍙互鐩存帴浣跨敤瀹樻柟鎻愪緵鐨刴apActions鍜宮apState鏂规硶瀵煎嚭store涓殑state銆乬etter銆乤ction銆傚畠鐨勭敤娉曚笌Vuex鍩烘湰鐩稿悓锛屼笂鎵嬬畝鍗曘€俰mport{mapActions,mapState}from'pinia'import{useCounterStore}from'../model/counter'exportdefault{name:'HelloWorld',computed:{...mapState(useCounterStore,['count','double'])},methods:{...mapActions(useCounterStore,['increment'])}}CompositionApiCompositionApi涓璼tate鍜実etter閮介渶瑕侀€氳繃computed鏂规硶鐩戝惉鍙樺寲锛岄渶瑕佹斁鍦∣ptionsApi涓绠楀璞′篃鏄姝ゃ€傚彟澶栵紝鍙互鐩存帴淇敼OptionsApi涓幏鍙栫殑state鍊笺€傚綋鐒讹紝杩樻槸寤鸿鍐欎竴涓搷浣渟tate鍊肩殑action锛屾柟渚垮悗鏈熺淮鎶ゃ€?/CompositionApiimport{computed}from'vue'import{useCounterStore}from'../stores/counter'exportdefault{name:'HelloWorld',setup(){constcounter=useCounterStore()return{//state鍜実etter涓よ€呴兘闇€瑕佷娇鐢╟omputed锛屼笌OptionsApicount鐩稿悓锛歝omputed(()=>counter.count),double:computed(()=>counter.double),increment:()=>{counter.count++},//鍙互鐩存帴淇敼stateincrement鐨勫€?counter.increment,//鍙互鍙傝€僺tore涓畾涔夌殑action}}}Typehints鍦╒uex涓紝TypeScript鐨則ypehints涓嶆槸寰堝ソ銆傚湪鍋氱被鍨嬫帹瀵肩殑鏃跺€欙紝鍙兘鎵惧埌瀹冪殑鐘舵€併€傚挨鍏舵槸鍦ㄥ啓浠ｇ爜鐨勮繃绋嬩腑锛屼唬鐮佹彁绀洪潪甯镐笉鏅鸿兘銆傝€宲inia鍙互鎺ㄥ鍑烘墍鏈夊畾涔夌殑鐘舵€併€乬etter銆佸姩浣滐紝杩欐牱鍐欎唬鐮佺殑鏃跺€欎細鏂逛究寰堝銆備富瑕佸師鍥犳槸pinia閫氳繃TypeScript鏈変竴涓潪甯稿弸濂界殑绫诲瀷瀹氫箟銆傛湁鍏磋叮鐨勫彲浠ョ湅鐪媝inia鐨勭被鍨嬪畾涔夋枃浠讹紙pinia.d.ts锛夛細浠ｇ爜鍒囧垎閲囩敤妯″潡鍖栬璁★紝鎵€鏈夌殑store閮藉彲浠ュ崟鐙鍏ワ紝鑰屼笉鍍弙uex鎶婃墍鏈夌殑妯″潡閮芥寕杞藉埌涓€涓猻tore涓婇€氳繃妯″潡銆傚亣璁炬垜浠綋鍓嶉€氳繃Vuex鍒涘缓浜嗕竴涓簵閾猴紝杩欎釜搴楅摵涓嬮潰鏈変袱涓ā鍧楋紝鍒嗗埆鏄敤鎴锋ā鍧楋紙User锛夊拰鍟嗗搧妯″潡锛坓oods锛夈€傚嵆浣垮綋鍓嶉椤靛彧浣跨敤鐢ㄦ埛淇℃伅锛屾暣涓猄tore涔熶細琚墦鍖呭埌棣栭〉鐨刯schunk涓€傚鏋滄垜浠娇鐢╬inia锛屾垜浠皢浣跨敤defineStore鏉ュ畾涔変袱涓畬鍏ㄧ嫭绔嬬殑store锛屼袱涓〉闈㈠鍏ユ椂涓嶄細浜掔浉褰卞搷銆傛渶鍚庢墦鍖呯殑鏃跺€欙紝棣栭〉鐨刯schunk鍜屽晢鍝侀〉鐨刯schunk浼氬垎鍒墦鍖呭搴旂殑搴楅摵銆侾inia鐨勪粙缁嶅埌杩欓噷灏卞憡涓€娈佃惤浜嗐€傚鏋滄湁鏂伴」鐩浣跨敤Vue3寮€鍙戯紝鎺ㄨ崘浣跨敤鏃犺剳Pinia锛屾洿鍔犵畝娲侊紝澶у皬鍙湁1KB銆?/p>
