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

使用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上时会发现，控制台会报错：

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的版本号：