当前位置:网站首页>【精品】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,会看到:
边栏推荐
- js對JSON數組的增删改查
- Interface joint debugging test script optimization v4.0
- STM32 enters and wakes up the stop mode through the serial port
- 服务器SMP、NUMA、MPP体系学习笔记。
- matplotlib画柱状图并添加数值到图中
- How does crmeb mall system help marketing?
- Entropy information entropy cross entropy
- 同一个作业有两个source,同一链接不同数据库账号,为何第二个链接查出来的数据库列表是第一个账号的
- 传统企业要为 Web3 和去中心化做的 11 个准备
- Cover fake big empty talk in robot material sorting
猜你喜欢
The "white paper on the panorama of the digital economy" has been released with great emphasis on the digitalization of insurance
Cover fake big empty talk in robot material sorting
基于jsp+servlet+mysql框架的旅游管理系统【源码+数据库+报告】
Gradle知識概括
11 preparations for Web3 and Decentralization for traditional enterprises
今日睡眠质量记录78分
Gradle知识概括
Wu Enda 2022 machine learning course evaluation is coming!
2022 latest blind box mall complete open source operation source code / docking visa free payment interface / building tutorial
AI表现越差,获得奖金越高?纽约大学博士拿出百万重金,悬赏让大模型表现差劲的任务...
随机推荐
Microsoft win11 is still "unsatisfactory". Multi user feedback will cause frequent MSI crashes
Matplotlib draws a histogram and adds values to the graph
英国都在试行4天工作制了,为什么BAT还对996上瘾?
Wind chime card issuing network source code latest version - commercially available
求帮助xampp做sqlilab是一片黑
ArrayExpress数据库里的细胞只有两个txt是不是只能根据Line到ENA下载测序跑矩阵?
Local deployment Zeppelin 0.10.1
本地部署 zeppelin 0.10.1
flinksql select id ,count(*) from a group by id .
MVC and MVVM
leetcode:236. The nearest common ancestor of binary tree
Wasserstein Slim GAIN with Gradient Penalty(WSGAIN-GP)介绍及代码实现——基于生成对抗网络的缺失数据填补
The tutorial of computer reinstallation win10 system is simple and easy to understand. It can be reinstalled directly without U disk
Hydrogen future industry accelerates | the registration channel of 2022 hydrogen energy specialty special new entrepreneurship competition is opened!
Gradle知識概括
Example code of MySQL split string as query condition
谁说新消费品牌大溃败?背后有人赢麻了
Compile logisim
Rider离线使用Nuget包的方法
Today, I met a senior test developer from Tencent and saw the ceiling of the foundation