目錄
Pinia 是什么？
uni-app 使用Pinia
main.js 中引用pinia
創建和注冊模塊
定義pinia方式
選項options方式?定義pinia
頁面中使用 pinia選項options方式
函數方式?定義pinia
頁面中使用?函數方式?定義的pinia
Pinia 是什么？
Pinia（發音為?/pi?nj?/，如英語中的?peenya） 是 Vue 的存儲庫，它允許您跨組件、頁面共享狀態。
在服務器端以及小型單頁應用程序中，您也可以從使用 Pinia 中獲得很多好處：
-
Devtools 支持
-
追蹤 actions、mutations 的時間線
-
在組件中展示它們所用到的 Store
-
讓調試更容易的 Time travel
-
-
?熱模塊更換
-
不必重載頁面即可修改 Store
-
開發時可保持當前的 State
-
-
為 JS 開發者提供適當的 TypeScript 支持以及 自動補全 功能。
uni-app 使用Pinia
uni-app 內置了 Pinia 。Vue 2 項目暫不支持
使用 HBuilder X 不需要手動安裝，直接使用即可。使用 CLI 需要手動安裝，執行?yarn add pinia@2.0.33?或?npm install pinia@2.0.33。
uni-app已經內置了vuex和pinia兩個狀態管理，不需要安裝即可使用。
建議項目結構
├──?pages
├──?static
└──?stores?//?注意此處└──?counter.js
├──?App.vue
├──?main.js
├──?manifest.json
├──?pages.json
└──?uni.scssmain.js 中引用pinia
mian.js?引用并使用pinia
//導入pinia
import?*?as?Pinia?from??'pinia'//?創建Pinia實例??//?將pinia實例掛載到vue實例上?
app.use(Pinia.createPinia());return?{app,Pinia,?//?此處必須將?Pinia?返回
}?
main.js完整代碼
//?#ifndef?VUE3
import?Vue?from?'vue'
import?App?from?'./App'?Vue.config.productionTip?=?falseApp.mpType?=?'app'const?app?=?new?Vue({...App
})
app.$mount()
//?#endif//?#ifdef?VUE3
import?{?createSSRApp?}?from?'vue'//導入pinia??
import?*?as?Pinia?from??'pinia'import?App?from?'./App.vue'
export?function?createApp()?{const?app?=?createSSRApp(App)//?創建Pinia實例??//?將pinia實例掛載到vue實例上?app.use(Pinia.createPinia());return?{app,Pinia,?//?此處必須將?Pinia?返回}
}
//?#endif請特別注意pinia引用位置，否則會報錯
創建和注冊模塊
在需要使用全局狀態管理的地方，你可以創建一個或多個Pinia模塊。每個模塊代表一個具體的狀態管理單元。
項目中，新建stores文件夾，用于存儲?創建和注冊的模塊
在stores文件夾，新建js文件（useCounterStore.js），用于存儲?創建和注冊的模塊
定義pinia方式
選項options方式?定義pinia
在useCounterStore.js中寫入如下代碼
import?{?defineStore?}?from?'pinia'//?定義倉庫有兩種定義方式//?01?選項options方式
export?const?useCounterStore?=?defineStore('counter',?{//?定義狀態state:()=>({count:5}),//?計算數據getters:{doubleCount:(state)=>state.count*2},//?動作支持異步actions:{setCount(v){this.count?=?v;}}
})頁面中使用 pinia選項options方式
<template><view>pinia?大菠蘿doubleCount:{{doubleCount}}<button>{{count}}</button></view>
</template><script>
import?{useCounterStore}?from?"@/stores/useCounterStore.js
//?map方泛
import?{mapState}?from?'pinia';export?default?{data(){},computed:?function(){//?把pinia?的state映射到頁面...mapState(useCounterStore,["count","doubleCount"]}?,methods:{//?把pinia的方法映射到頁面...mapActions(useCounterStore,["setCount"])}
</script>這種寫法，和vuex很類似，但是少了mutation方法
函數方式?定義pinia
新建js文件(useColorStore.js)，并且定義pinia
//?導入定義倉庫的方法
import?{defineStore}?from?'pinia';//?導入響應式和計算
import?{ref}?from?'vue'
const??useColorStore?=?defineStore("color",()=>{//?定義一個狀態顏色為?默認紅色const?color=ref('red');//?定義一個設置狀態的方法const?setColor?=?v=>{color.value?=?v;}//?導入return?{color,setColor}
})?export?default?useColorStore;??????????頁面中使用?函數方式?定義的pinia
<template><view?class="container"><button?@click="setColor">更改顏色</button>?<view?:style="'background:'+colorStore.color">v-show="isShow"</view></view>
</template><script?setup>import?useColorStore?from?'@/stores/useColorStore.js'const?colorStore?=?useColorStore()?const?setColor?=?()?=>?{?colorStore.setColor('#333')}??
</script>?<style?lang="less"?scoped>?.container?{padding:?0?20px?20px;font-size:?14px;line-height:?24px;}
</style>誤區
參考文檔
-
狀態管理 Pinia | uni-app官網
