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

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

一、首先，點(diǎn)擊安裝vue3（一般這個(gè)步驟，我們都需要通過(guò)下載壓縮包的方式來(lái)完成初始化安裝）

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

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

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

三、安裝pinia

理論上，此時(shí)可使用命令 npm install pinia 來(lái)直接安裝pinia的默認(rèn)最新版本：2.1.6。但是測(cè)試發(fā)現(xiàn)，采用將pinia安裝在vue上時(shí)會(huì)發(fā)現(xiàn)，控制臺(tái)會(huì)報(bào)錯(cuò)：

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

在小程序的編譯器中也會(huì)報(bào)錯(cuò)：

"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

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

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

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

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

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

目前也只有該方法可行。

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

創(chuàng)建測(cè)試文件 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文件中進(jìn)行測(cè)試：

    <view>當(dāng)前值為：{{ num }}-- {{doubleNum}}</view>
    <button @click="add">點(diǎn)擊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í)，如果有多個(gè)頁(yè)面，那么數(shù)據(jù)在多個(gè)頁(yè)面之間是可以保持的，但是如果我們一旦刷新頁(yè)面，或者關(guān)閉瀏覽器再打開(kāi)，則會(huì)發(fā)現(xiàn)數(shù)據(jù)會(huì)丟失。此時(shí)，我們就需要一個(gè)數(shù)據(jù)持久化的解決方案。

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

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

安裝命令：

npm i pinia-plugin-persistedstate

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

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

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

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

{
    persist:true
}

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

但是，當(dāng)我們將vue用于開(kāi)發(fā)小程序時(shí)，以往的localStore存儲(chǔ)方案就行不通了。此時(shí)，我們就需要重新配置數(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ù)自己的實(shí)際開(kāi)發(fā)場(chǎng)景，來(lái)完成自己的pinia數(shù)據(jù)持久化配置。

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

最新評(píng)論