使用vue3中的pinia,我们可以在多个页面间共享数据,但是一旦我们关闭或刷新页面,这些数据就会丢失,因此,我们需要有一种数据持久化的解决方案。在记录vue3
使用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上时会发现,控制台会报错:
go
Uncaught SyntaxError: The requested module '/node_modules/pinia/node_modules/vue-demi/lib/index.mjs?v=f43e2f61' does not provide an export named 'hasInjectionContext'
在小程序的编译器中也会报错:
javascript
"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
handlebars
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文件中进行测试:
javascript
<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文件中进行安装:
handlebars
import {createPinia} from "pinia";
import piniaPersist from 'pinia-plugin-persistedstate'
const pinia = createPinia();
pinia.use(piniaPersist)
在count.js文件中,添加第三个参数:
javascript
{
persist:true
}
即可简单开启,数据的可持久化,默认数据是存储在localStore中的,因此关闭浏览器再打开,数据也是存在的。
但是,当我们将vue用于开发小程序时,以往的localStore存储方案就行不通了。此时,我们就需要重新配置数据持久化。参考如下:
handlebars
{
// 数据持久化配置
persist: {
// enabled: true,
// 调整为兼容多端的API
storage: {
getItem(key) {
return uni.getStorageSync(key)
},
setItem(key, value) {
uni.setStorageSync(key, value)
}
}
}
大家可以根据自己的实际开发场景,来完成自己的pinia数据持久化配置。