当前位置:网站首页>【精品】pinia 基于插件pinia-plugin-persist的 持久化
【精品】pinia 基于插件pinia-plugin-persist的 持久化
2022-07-06 16:25:00 【梁云亮】
准备工作
第一步:安装pinia
npm install pinia --save
第二步:新建store目录,创建index.ts
import {
createPinia } from "pinia"
const store = createPinia()
export default store
第三步:main.ts中使用store
import {
createApp } from 'vue'
import store from '@/store'
const app = createApp(App)
app.use(store)
app.mount('#app')
第四步:新建user.ts
import {
defineStore } from "pinia"
export const useUserStore = defineStore({
id:'user',
state() {
return {
name: '',
age: 0
}
}
})
第五步:在vue页面中使用
<template>
User:{
{ name }} == {
{ age }}
<br>
<button @click="fun">修改值</button>
</template>
<script setup lang="ts"> import {
useUserStore} from "@/store/module/user" import {
storeToRefs} from "pinia" const userStore = useUserStore() const {
name, age} = storeToRefs(userStore) const fun = () => {
userStore.name = "zhangsan" userStore.age = 18 } </script>
结果
打开页面,单击页面按钮,显示的用户信息发生变化,刷新页面又恢复到原来的样子。
利用插件pinia-plugin-persist持久化
第一步:安装插件pinia-plugin-persist
npm install pinia-plugin-persist --save
第二步:修改store文件夹下的index.ts
import {
createPinia } from "pinia"
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store
第三步:修改user.ts,为其添加persist
import {
defineStore} from "pinia"
export const useUserStore = defineStore({
id: "user",
state: () => {
return {
name: '',
age: 0
}
},
persist: {
enabled: true,
strategies: [
{
key: 'wego_user',
storage: localStorage
}
]
}
})
注:在strategies中可以指定对哪些数据进行缓存,比如:
strategies: [
{
storage: localStorage, paths: ['token','name'] }
]
测试
运行程序,打开页面单击按钮,数据发生变化,关闭页面再次打开,页面显示的仍然是变化后的数据,此时F12,会看到:
边栏推荐
- After 3 years of testing bytecan software, I was ruthlessly dismissed in February, trying to wake up my brother who was paddling
- Zero code and high return. How to use 40 sets of templates to meet 95% of the reporting needs in the work
- 基于jsp+servlet+mysql框架的旅游管理系统【源码+数据库+报告】
- One minute to learn how to install the system, win7 XP, win10 and win11 become very simple
- 【212】php发送post请求有哪三种方法
- If the request URL contains jsessionid, the solution
- Per capita Swiss number series, Swiss number 4 generation JS reverse analysis
- 基于SSM框架实现的房屋租赁管理系统
- Restoration analysis of protobuf protocol of bullet screen in station B
- js對JSON數組的增删改查
猜你喜欢
The best sister won the big factory offer of 8 test posts at one go, which made me very proud
koa2对Json数组增删改查
Interface joint debugging test script optimization v4.0
Design a red envelope grabbing system
Cas d'essai fonctionnel universel de l'application
Basic chart interpretation of "Oriental selection" hot out of circle data
Stop saying that microservices can solve all problems
How much does the mlperf list weigh when AI is named?
Daily question brushing record (XV)
英国都在试行4天工作制了,为什么BAT还对996上瘾?
随机推荐
Yaduo Sangu IPO
MATLIB reads data from excel table and draws function image
Detailed explanation of regular expression (regexp) in MySQL
英国都在试行4天工作制了,为什么BAT还对996上瘾?
The best sister won the big factory offer of 8 test posts at one go, which made me very proud
Talking about the current malpractice and future development
2022 latest blind box mall complete open source operation source code / docking visa free payment interface / building tutorial
koa2对Json数组增删改查
AVL树到底是什么?
JDBC programming of MySQL database
Entropy information entropy cross entropy
Oracle对表进行的常用修改命令
AI金榜题名时,MLPerf榜单的份量究竟有多重?
I've been laid off, and I'll lose money for everything. The days when I once made a monthly salary of 20000 are not coming back
每日刷题记录 (十五)
快手的新生意,还得靠辛巴吆喝?
mysql-cdc 的jar包 ,在flink运行模式下,是不是要放在不同的地方呢?
Knowledge * review
Today's sleep quality record 78 points
One minute to learn how to install the system, win7 XP, win10 and win11 become very simple