前言
內(nèi)容有幫助的可以直接復(fù)制代碼
pinia簡介
vue3發(fā)布以后，pinia也隨著誕生， 代替 Vuex 做狀態(tài)管理，比較直觀的好處就是不用在區(qū)分 同步調(diào)用 和 異步調(diào)用 了，store 的修改動(dòng)作 action 作為常規(guī)函數(shù)調(diào)用，而不是使用 dispatch 方法或者是 commit 去調(diào)用，當(dāng)然最重要的還是對(duì) TS 支持比較友好
uniapp 中使用
在uniapp中使用pinia與我們平時(shí)使用 npm 安裝插件的方式略有不同
使用 HBuilder X 不需要手動(dòng)安裝，直接使用即可
直接在 main.js 引入相關(guān)代碼：
import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';
export function createApp() {
const app = createSSRApp(App);
app.use(Pinia.createPinia());
return {
app,
Pinia, // 此處必須將 Pinia 返回
};
}
這樣我們就可以全局使用pinia了
添加管理模塊
這里我們以一個(gè)登錄模塊為例
在根目錄創(chuàng)建文件store/account.js定義好相關(guān)屬性
import { defineStore } from 'pinia'
export const useAccountStore = defineStore('account', {
state: () => {
return {
account: '測試'
}
},
actions: {
login(account) {
this.account = account
}
}
})
然后就可以在頁面中使用了
import { useAccountStore } from '@/stores/account.js'
const account = useAccountStore()
// 調(diào)用 actions
account.login('測試123')
這里可以通過屬性訪問的方式調(diào)用方法，也可以將方法解構(gòu)出來，具體看使用習(xí)慣即可
數(shù)據(jù)持久化
使用狀態(tài)管理時(shí)，有時(shí)我們會(huì)有這樣的需求，需要將狀態(tài)管理的數(shù)據(jù)存儲(chǔ)到本地緩存中，在頁面刷新，或者下一次訪問時(shí)依然生效，uniapp提供了uni.setStorageSync()方法支持各個(gè)平臺(tái)將數(shù)據(jù)存在本地，單如果需要時(shí)每一個(gè)單獨(dú)加不便于管理，這個(gè)時(shí)候可以使用持久化的緩存插件，會(huì)自動(dòng)把pinia配置的數(shù)據(jù)存到本地
使用pinia-plugin-unistorage
插件市場導(dǎo)入插件
pinia-plugin-unistorage - DCloud 插件市場
配置main.js
import { createUnistorage } from './uni_modules/pinia-plugin-unistorage'
export function createApp() {
const app = createSSRApp(App)
// 狀態(tài)管理
const store = Pinia.createPinia()
// 持久化
store.use(createUnistorage())
app.use(store)
return {
app,
Pinia
}
}
在需要持久化緩存的狀態(tài)配置好開關(guān)，以account.js為例
import { defineStore } from 'pinia'
export const useAccountStore = defineStore('account', {
unistorage: true, // 是否持久化
state: () => {
return {
account: '測試'
}
},
actions: {
login(account) {
this.account = account
}
}
})
配置好unistorage屬性后，Pinia就會(huì)自動(dòng)把相關(guān)數(shù)據(jù)存到緩存里啦。
