佛山网站建设网站建设,商业网络,未来商城网站建设,临沧网络推广使用vue3中的pinia#xff0c;我们可以在多个页面间共享数据#xff0c;但是一旦我们关闭或刷新页面#xff0c;这些数据就会丢失#xff0c;因此#xff0c;我们需要有一种数据持久化的解决方案。在记录vue3 使用vue3中的pinia#xff0c;我们可以在多个页面间共享数据我们可以在多个页面间共享数据但是一旦我们关闭或刷新页面这些数据就会丢失因此我们需要有一种数据持久化的解决方案。在记录vue3 使用vue3中的pinia我们可以在多个页面间共享数据但是一旦我们关闭或刷新页面这些数据就会丢失因此我们需要有一种数据持久化的解决方案。
在记录vue3中使用数据可持久化方式的同时我们顺便记录一下在webstorm中编写uni-app代码的一个过程。
一、首先点击安装vue3一般这个步骤我们都需要通过下载压缩包的方式来完成初始化安装
打开package.json我们发现默认uni-app为我们预装的vue3版本为3.2.45。
二、使用命令npm install vuelatest升级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?vf43e2f61 does not provide an export named hasInjectionContext 在小程序的编译器中也会报错
hasInjectionContext is not exported by node_modules/pinia/node_modules/vue-demi/lib/index.mjs, imported bynode_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 pinia2.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}}/viewbutton clickadd点击num1/button
/templatescript 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-persistedstateconst pinia createPinia();
pinia.use(piniaPersist)在count.js文件中添加第三个参数
{persist:true
}即可简单开启数据的可持久化默认数据是存储在localStore中的因此关闭浏览器再打开数据也是存在的。
但是当我们将vue用于开发小程序时以往的localStore存储方案就行不通了。此时我们就需要重新配置数据持久化。参考如下
{// 数据持久化配置persist: {// enabled: true,// 调整为兼容多端的APIstorage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {uni.setStorageSync(key, value)}}}大家可以根据自己的实际开发场景来完成自己的pinia数据持久化配置。
