实现pinia持久化存储

一、安装插件之前，检查自己的pinia 版本确保是pinia^2.0.0以上的版本

在项目目录的package.json中，查看pinia版本：

二、安装插件：

npm i pinia-plugin-persistedstate

三、把插件安装在实例上：在main.js中写入：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

参考我自己的main.js文件如图：

四、创建 Store 时，将 persist 选项设置为 true。

在自己的仓库文件中，写入，例如：

import { defineStore } from 'pinia'

export const 常量名= defineStore(
  '仓库名称',() => {
    const test = ref('XXX')
        代码内容...
    return { test }    //定义的常量都return出去
  },
  {
    persist: true, //开启持久化存储
  },
)

 完成！

注意，当前的整个state，会开启持久化

持久化配置，存储的方式是localStorage方式哦

如果还需要更详细的配置：

        如果不想使用默认的配置，可以自己修改，通过设置key的方式：

        

在谷歌vue-devtools调试工具中的application中的localStorage查看，已经修改成了自己设置的key:

如果没有修改，默认的key会是自己库文件的名称！

前面说个默认是整个state开启持久化，那么，如果只想把需要的数据持久化，可以使用paths：

例如，只持久化count和msg

更多可以查阅官方文档！ 

 

官方文档：

         点击官网：Home | pinia-plugin-persistedstate