鍓嶈█銆恜inia婧愮爜銆戠郴鍒楁枃绔犱富瑕佸垎鏋恜inia鐨勫疄鐜板師鐞嗐€傛湰绯诲垪鏂囩珷婧愮爜鍙傝€僷iniav2.0.14銆傛簮鐮佸湴鍧€锛歨ttps://github.com/vuejs/pinia瀹樻柟鏂囨。锛歨ttps://pinia.vuejs.org鏈枃灏嗗垎鏋恗apHelperAPI鐨勫疄鐜般€備娇鐢╬inia鎻愪緵Vuex涓殑mapState銆乵apActions绛変竴浜涜緟鍔╁姛鑳姐€傝繖浜涘嚱鏁板湪packages/pinia/src/mapHelpers.ts涓畾涔夈€俶apStore浣跨敤mapStore鑾峰彇瀹屾暣鐨勫晢搴椼€俰mport{mapStores}from'pinia'constuseUserStore=defineStore('user',{//...})constuseCartStore=defineStore('cart',{//...})exportdefault{computed:{...mapStores(useCartStore,useUserStore)},鏂规硶:{asyncbuyStuff(){if(this.userStore.isAuthenticated()){awaitthis.cartStore.buy()}},},}mapState,mapGetters,mapActions浣跨敤mapState,鑾峰彇store.state鍜宻tate.getter銆俶apGetters鏄痬apState鐨勫埆鍚嶃€備娇鐢╩apAction锛岃幏鍙杝tore.actions銆俥xportdefault{computed:{...mapState(useCounterStore,{n:'count',triple:store=>store.n*3,doubleN:'double'})},created(){this.add()鎺у埗鍙?log(this.n)//2console.log(this.doubleN)//4},methods:{...mapActions(useCounterStore,{add:'increment',})}}exportdefault{computed:{...mapState(useCounterStore,['count','double'])},created(){this.add()console.log(this.count)//2console.log(this.double)//4},methods:{...mapActions(useCounterStore,['add'])}}mapWritableState绫讳技浜巑apState锛屼絾涓嶅悓浜巑apState鐨勬槸锛屽彲浠ョ洿鎺ヤ慨鏀归€氳繃mapWritableState鑾峰彇鐨勬暟鎹€俥xportdefaultdefineComponent({name:'Test',computed:{...mapWritableState(useCounterStore,['n'])},methods:{handleClick(){this.n++}}})mapStore婧愮爜瀵煎嚭鍑芥暟mapStores(...stores:[...Stores]):_Spread{//濡傛灉鎺ユ敹鍒版暟缁勫弬鏁帮紝鎻愮ずif(__DEV__&&Array.isArray(stores[0])){console.warn(`[馃崓]:鐩存帴灏嗘墍鏈夊晢搴椾紶閫掔粰"mapStores()"鑰屼笉鏄皢瀹冧滑鏀惧叆鏁扮粍涓細\n`+`Replace\n`+`\tmapStores([useAuthStore,useCartStore])\n`+`with\n`+`\tmapStores(useAuthStore,useCartStore)\n`+`濡傛灉涓嶄慨澶嶏紝杩欏皢鍦ㄧ敓浜т腑澶辫触銆俙)//鍦ㄥ紑鍙戠幆澧冧腑锛宻tores鍙栫涓€涓€約tores=stores[0]}//杩斿洖涓€涓璞eturnstores.reduce((reduced,useStore)=>{//reducedkeyvalue:useStore.$id+mapStoreSuffix(defaultStore,canbemodifiedwithsetMapStoreSuffix)reduced[useStore.$id+mapStoreSuffix]=function锛堣繖涓細ComponentPublicInstance){//浣跨敤useStore鑾峰彇store锛屽湪缁勪欢涓彲浠ラ€氳繃this.$piniareturnuseStore(this.$pinia)}returnreduced},{}as_Spread)}mapStores鍙互鎺ユ敹澶氫釜浣跨敤Store鍑芥暟mapStores鍙傛暟灏嗚妫€鏌ャ€傚鏋滀紶鍏ョ殑绗竴涓弬鏁版槸鏁扮粍锛屽紑鍙戠幆澧冧細缁欏嚭鎻愮ず锛屽苟灏嗘暟缁勪腑鐨勭涓€涓€艰祴鍊肩粰stores锛屼互淇濊瘉鍦ㄥ紑鍙戠幆澧冧腑鍙互杩愯銆傜劧鍚庤繑鍥炰竴涓璞★紝鐢眘tores.reduce鐢熸垚銆傚璞$殑閿€肩敱useStore.$id+mapStoreSuffix缁勬垚锛屽搴旂殑鍊兼槸涓€涓嚱鏁般€傚嚱鏁颁腑浼氳皟鐢║seStore(this.$pinia)骞惰繑鍥炵粨鏋溿€俶apState銆乵apGetters婧愮爜瀵煎嚭鍑芥暟mapState,A>(useStore:StoreDefinition,keysOrMapper:any):_MapStateReturn|_MapStateObjectReturn{杩斿洖Array.isArray(keysOrMapper)锛焝eysOrMapper.reduce((reduced,key)=>{reduced[key]=function(this:ComponentPublicInstance){returnuseStore(this.$pinia)[key]}as()=>anyreturnreduced},{}as_MapStateReturn):Object.keys(keysOrMapper).reduce((reduced,key:string)=>{reduced[key]=function(this:ComponentPublicInstance){conststore=useStore(this.$pinia)conststoreKey澶嶅埗浠g爜=keysOrMapper[key]杩斿洖绫诲瀷storeKey==='function'?(storeKeyas(store:Store)=>any).call(this,store):store[storeKey]}returnreduced},{}as_MapStateObjectReturn)}exportconstmapGetters=mapStatemapState鍙互鎺ュ彈涓や釜鍙傛暟锛歶seStore锛堜竴涓猽seStore鍑芥暟锛夛紝keysOrMapper锛堜竴涓猭ey鍒楄〃锛屾垨鑰卪ap瀵硅薄锛塵apState灏嗚繑鍥為€氳繃keysOrMapper鑾峰彇閿€肩殑瀵硅薄銆傚鏋滀紶鍏ョ殑keysOrMapper鏄竴涓暟缁勶紝鍒欒繑鍥炲璞$殑key灏辨槸keysOrMapper涓殑鍏冪礌锛宬ey瀵瑰簲鐨剉alue灏辨槸涓€涓幏鍙杝tore[key]鐨勫嚱鏁般€傚鏋渒eysOrMapper鏄竴涓璞★紝鍒欒繑鍥炲璞$殑key灏辨槸keysOrMapper涓殑key锛宬ey瀵瑰簲鐨剉alue鏍规嵁keysOrMapper[key]鐨勭被鍨嬩笉鍚屻€傚鏋渒eysOrMapper[key]鏄竴涓嚱鏁帮紝鍒欒繑鍥炵粨鏋滀腑key瀵瑰簲鐨剉alue鏄竴涓繑鍥炵殑keysOrMapper[key].call(this,store)锛屽惁鍒檏ey瀵瑰簲涓€涓繑鍥瀞tore[keysOrMapper[key]]鐨勫嚱鏁般€俶apGetters涓巑apState鐩稿悓銆俶apActions婧愮爜瀵煎嚭鍑芥暟mapActions,A,KeyMapperextendsRecord>(useStore:StoreDefinition,keysOrMapper:Array|KeyMapper):_MapActionsReturn|_MapActionsObjectReturn{杩斿洖Array.isArray(keysOrMapper)锛焝eysOrMapper.reduce((reduced,key)=>{reduced[key]=function(this:ComponentPublicInstance,...args:any[]){returnuseStore(this.$pinia)[key](...args)}returnreduced},{}as_MapActionsReturn):Object.keys(keysOrMapper).reduce((reduced,key:keyofKeyMapper)=>{reduced[key]=function(杩欎釜:ComponentPublicInstance,...args:any[]){returnuseStore(this.$pinia)[keysOrMapper[key]](...args)}returnreduced},{}as_MapActionsObjectReturn)}mapActions鍙互鎺ュ彈涓や釜鍙傛暟锛歶seStore锛堜竴涓猽seStore鍑芥暟锛夛紝keysOrMapper锛堜竴涓敭鍒楄〃锛屾垨鑰呭湴鍥惧璞★級mapActions杩斿洖涓€涓璞°€傞€氳繃keysOrMapper鑾峰彇瀵硅薄涓殑key銆傚鏋渒eysOrMapper鏄竴涓暟缁勶紝閭d箞key灏辨槸鏁扮粍涓殑涓€涓厓绱狅紝瀵瑰簲鐨剉alue灏辨槸涓€涓嚱鏁般€傝鍑芥暟杩斿洖store[key]()瀵瑰簲鐨勮繑鍥炲€笺€傚鏋渒eysOrMapper鏄竴涓璞★紝閭d箞瀵硅薄涓殑key灏辨槸keysOrMapper涓殑key锛屽搴旂殑value灏辨槸涓€涓繑鍥瀞tore[keysOrMapper[key]]()杩斿洖鍊肩殑鍑芥暟銆俶apWritableState婧愮爜瀵煎嚭鍑芥暟mapWritableState,A,KeyMapperextendsRecord>(useStore:StoreDefinition,keysOrMapper:Array|KeyMapper):_MapWritableStateReturn|_MapWritableStateObjectReturn{杩斿洖Array.isArray(keysOrMapper)锛焝eysOrMapper.reduce((reduced,key)=>{reduced[key]={get(this:ComponentPublicInstance){returnuseStore(this.$pinia)[key]},set(this:ComponentPublicInstance,value){return(useStore(this.$pinia)[key]=浠讳綍鍊?},}returnreduced},{}as_MapWritableStateReturn):Object.keys(keysOrMapper).reduce((reduced,key:keyofKeyMapper)=>{reduced[key]={get(this:ComponentPublicInstance){杩斿洖useStore(this.$pinia)[keysOrMapper[key]]},set(this:ComponentPublicInstance,value){return(useStore(this.$pinia)[keysOrMapper[key]]=valueasany)},}杩斿洖鍑忓皯},{}as_MapWritableStateObjectReturn)}mapWritableState鐨勫疄鐜拌繃绋嬪拰mapState绫讳技锛屽彧鏄痬apWritableState杩斿洖鐨剅esult涓殑value鏄竴涓璞★紝瀵硅薄涓湁get鍜宻et鍑芥暟銆傞€氳繃璁剧疆set鍑芥暟锛岀敤鎴峰彲浠ヤ慨鏀圭浉搴旂殑state缁间笂鎵€杩帮紝mapStores銆乵apState銆乵apActions绛夎緟鍔╁嚱鏁帮紝鍐呴儴浼氳皟鐢╱seStore锛堣皟鐢╱seStore鏃朵細浼犲叆this.$pinia锛宼his涓虹粍浠跺疄渚嬶紝杩欏氨鏄负浠€涔坰etup涓笉鑳戒娇鐢ㄨ緟鍔╁嚱鏁帮紝鍥犱负鍦╯etup涓棤娉曡幏鍙朇omponentinstance)鏉ヨ幏鍙杝tore锛岀劧鍚庡湪store涓幏鍙栫浉搴旂殑灞炴€с€?/p>