Pinia持久化存储插件, 持久化存储插件安装(超详细教程)

目录

1. 持久化存储插件

第一步：安装插件

第二步：在main.js文件中导入插件，并注册

第三步: 在web.js添加persist: true

2. 进行测试

2.1 测试代码

---

1. 持久化存储插件

把pinia定义好的数据存储到本地的localstore中实现持久化存储，这时需要使用一个插件pinia-plugin-persistedstate

接下来我们安装该插件并学会使用它。

第一步：安装插件

    安装插件命令

npm i pinia-plugin-persistedstate

第二步：在main.js文件中导入插件，并注册

引入插件代码

import piniapluginpersistedstate from 'pinia-plugin-persistedstate'

第三步: 在web.js添加persist: true

2. 进行测试

2.1 测试代码

<template>

 <!-- <router-view></router-view> -->
<!-- webStore获取到的值: {{ web.state }} -->
webStore获取到的值: {{ web.count }}
<br>
<button @click="web.count++">点我+1</button>
</template>
 
<script setup>
import { webStore } from './store/web.js'
const   web = webStore()
</script>

然后刷新一下页面

 F12打开检查, 进入Application应用. 点击左边的本地储存, Storage下的localhost

 重新运行代码后发现, 数据是不变的