使用vue3中的pinia，我們可以在多個頁面間共享數(shù)據(jù)，但是一旦我們關(guān)閉或刷新頁面，這些數(shù)據(jù)就會丟失，因此，我們需要有一種數(shù)據(jù)持久化的解決方案。

在記錄vue3中使用數(shù)據(jù)可持久化方式的同時，我們順便記錄一下，在webstorm中編寫uni-app代碼的一個過程。

一、首先，點擊安裝vue3（一般這個步驟，我們都需要通過下載壓縮包的方式來完成初始化安裝）

打開package.json，我們發(fā)現(xiàn)，默認uni-app為我們預(yù)裝的vue3版本為：3.2.45。

二、使用命令：npm install vue@latest，升級Vue3的版本至最新的版本：3.3.4。

此時命令行提示：需要npm audit fix --force，但是經(jīng)測試，這個命令一旦執(zhí)行，就跑不起來了。

三、安裝pinia

理論上，此時可使用命令 npm install pinia 來直接安裝pinia的默認最新版本：2.1.6。但是測試發(fā)現(xiàn)，采用將pinia安裝在vue上時會發(fā)現(xiàn)，控制臺會報錯：

Uncaught SyntaxError: The requested module '/node_modules/pinia/node_modules/vue-demi/lib/index.mjs?v=f43e2f61' does not provide an export named 'hasInjectionContext' 

在小程序的編譯器中也會報錯：

"hasInjectionContext" is not exported by "node_modules/pinia/node_modules/vue-demi/lib/index.mjs", imported by
 "node_modules/pinia/dist/pinia.mjs".
at ../node_modules/pinia/dist/pinia.mjs:6:9

猜測可能是版本不匹配的原因，網(wǎng)上有說vue-demi的版本太低的緣故，通過命令：npm list vue-demi 我們查看，我們已安裝的 vue-demi的版本號為：0.14.6，且 vue-demi是在安裝pinia時附帶安裝的。

經(jīng)查詢：Vue Demi是一款可以同時支持Vue2和3的通用的Vue庫的開發(fā)工具，一般當(dāng)要創(chuàng)建一個Vue插件/庫時，只需將vue-demi安裝為依賴項并將其導(dǎo)入，然后就能讓軟件包就會變得通用。 但實測升級vue-demi的最新版本就是0.14.6，所以通過升級vue-demi的方法不可行。

網(wǎng)上有一種可行的方案是降低pinia的版本號：

這里，當(dāng)我們逐漸降低版本至2.0.36時，該報錯消失，編譯正常。至于具體什么原因，留待后續(xù)再研究，此處先記錄一下。

即，安裝pinia的命令應(yīng)該是：npm install pinia@2.0.36 --legacy-peer-deps

目前也只有該方法可行。

四、創(chuàng)建一個測試的store

創(chuàng)建測試文件 src/stores/count.js

import {defineStore} from "pinia";
import {computed, ref} from "vue";

export const useCountStore = defineStore('count', () => {
    const num = ref(0)
    const doubleNum = computed(() => {
        return num.value * 2
    })
    const add = () => {
        num.value++
    }
    return {num, doubleNum, add}
})

在app.vue文件中進行測試：

    <view>當(dāng)前值為：{{ num }}-- {{doubleNum}}</view>
    <button @click="add">點擊num+1</button>
</template>

<script setup>
import {useCountStore} from "../../stores/count";
import {storeToRefs} from "pinia";

const countStore = useCountStore()
const {num, doubleNum} = storeToRefs(countStore)
const {add} = countStore
</script>

此時，如果有多個頁面，那么數(shù)據(jù)在多個頁面之間是可以保持的，但是如果我們一旦刷新頁面，或者關(guān)閉瀏覽器再打開，則會發(fā)現(xiàn)數(shù)據(jù)會丟失。此時，我們就需要一個數(shù)據(jù)持久化的解決方案。

數(shù)據(jù)持久化的原因，即將數(shù)據(jù)寫入客戶端本地進行存儲和讀取，一般使用的是localStore和sessionStore，在小程序端，需要使用setStore的方式進行存儲。理論上，我們可以自己動手去實現(xiàn)這個功能，但是在這塊，已有現(xiàn)成的成熟的三方庫可以使用。

在選擇庫的時候，第一次我選擇了pinia-plugin-persist這個庫，應(yīng)該感覺其名稱比較精簡，不過后來發(fā)現(xiàn)，pinia-plugin-persist這款插件很久沒維護了，其次文檔非常簡略，于是，又切換為大家都在使用的：pinia-plugin-persistedstate，這款庫的文檔很詳細（文檔地址：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/）。

安裝命令：

npm i pinia-plugin-persistedstate

使用起來也很方便，如：簡單開啟數(shù)據(jù)持久化的方式，在main.js文件中進行安裝：

import {createPinia} from "pinia";
import piniaPersist from 'pinia-plugin-persistedstate'

const pinia = createPinia();
pinia.use(piniaPersist)

在count.js文件中，添加第三個參數(shù)：

{
    persist:true
}

即可簡單開啟，數(shù)據(jù)的可持久化，默認數(shù)據(jù)是存儲在localStore中的，因此關(guān)閉瀏覽器再打開，數(shù)據(jù)也是存在的。

但是，當(dāng)我們將vue用于開發(fā)小程序時，以往的localStore存儲方案就行不通了。此時，我們就需要重新配置數(shù)據(jù)持久化。參考如下：

{
    // 數(shù)據(jù)持久化配置
    persist: {
        // enabled: true,
        // 調(diào)整為兼容多端的API
        storage: {
            getItem(key) {
                return uni.getStorageSync(key)
            },
            setItem(key, value) {
                uni.setStorageSync(key, value)
            }
        }
    }

大家可以根據(jù)自己的實際開發(fā)場景，來完成自己的pinia數(shù)據(jù)持久化配置。

到此這篇關(guān)于vue3中如何使用Pinia實現(xiàn)數(shù)據(jù)持久化操作的文章就介紹到這了,更多相關(guān)vue3 Pinia數(shù)據(jù)持久化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論