vue3中如何使用Pinia实现数据持久化操作

使用vue3中的pinia，我们可以在多个页面间共享数据，但是一旦我们关闭或刷新页面，这些数据就会丢失，因此，我们需要有一种数据持久化的解决方案。

在记录vue3中使用数据可持久化方式的同时，我们顺便记录一下，在webstorm中编写uni-app代码的一个过程。

一、首先，点击安装vue3（一般这个步骤，我们都需要通过下载压缩包的方式来完成初始化安装）

打开package.json，我们发现，默认uni-app为我们预装的vue3版本为：3.2.45。

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

此时命令行提示：需要npm audit fix --force，但是经测试，这个命令一旦执行，就跑不起来了。

三、安装pinia

理论上，此时可使用命令 npm install pinia 来直接安装pinia的默认最新版本：2.1.6。但是测试发现，采用将pinia安装在vue上时会发现，控制台会报错：

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

猜测可能是版本不匹配的原因，网上有说vue-demi的版本太低的缘故，通过命令：npm list vue-demi 我们查看，我们已安装的 vue-demi的版本号为：0.14.6，且 vue-demi是在安装pinia时附带安装的。

经查询：Vue Demi是一款可以同时支持Vue2和3的通用的Vue库的开发工具，一般当要创建一个Vue插件/库时，只需将vue-demi安装为依赖项并将其导入，然后就能让软件包就会变得通用。 但实测升级vue-demi的最新版本就是0.14.6，所以通过升级vue-demi的方法不可行。

网上有一种可行的方案是降低pinia的版本号：

这里，当我们逐渐降低版本至2.0.36时，该报错消失，编译正常。至于具体什么原因，留待后续再研究，此处先记录一下。

即，安装pinia的命令应该是：npm install pinia@2.0.36 --legacy-peer-deps

目前也只有该方法可行。

四、创建一个测试的store

创建测试文件 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>当前值为：{{ 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>

此时，如果有多个页面，那么数据在多个页面之间是可以保持的，但是如果我们一旦刷新页面，或者关闭浏览器再打开，则会发现数据会丢失。此时，我们就需要一个数据持久化的解决方案。

数据持久化的原因，即将数据写入客户端本地进行存储和读取，一般使用的是localStore和sessionStore，在小程序端，需要使用setStore的方式进行存储。理论上，我们可以自己动手去实现这个功能，但是在这块，已有现成的成熟的三方库可以使用。

在选择库的时候，第一次我选择了pinia-plugin-persist这个库，应该感觉其名称比较精简，不过后来发现，pinia-plugin-persist这款插件很久没维护了，其次文档非常简略，于是，又切换为大家都在使用的：pinia-plugin-persistedstate，这款库的文档很详细（文档地址：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/）。

安装命令：

npm i pinia-plugin-persistedstate

使用起来也很方便，如：简单开启数据持久化的方式，在main.js文件中进行安装：

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

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

在count.js文件中，添加第三个参数：

{
    persist:true
}

即可简单开启，数据的可持久化，默认数据是存储在localStore中的，因此关闭浏览器再打开，数据也是存在的。

但是，当我们将vue用于开发小程序时，以往的localStore存储方案就行不通了。此时，我们就需要重新配置数据持久化。参考如下：

{
    // 数据持久化配置
    persist: {
        // enabled: true,
        // 调整为兼容多端的API
        storage: {
            getItem(key) {
                return uni.getStorageSync(key)
            },
            setItem(key, value) {
                uni.setStorageSync(key, value)
            }
        }
    }

大家可以根据自己的实际开发场景，来完成自己的pinia数据持久化配置。

到此这篇关于vue3中如何使用Pinia实现数据持久化操作的文章就介绍到这了,更多相关vue3 Pinia数据持久化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论