当前位置:网站首页>[boutique] Pinia Persistence Based on the plug-in Pinia plugin persist
[boutique] Pinia Persistence Based on the plug-in Pinia plugin persist
2022-07-06 23:52:00 【Liang Yunliang】
preparation
First step : install pinia
npm install pinia --save
The second step : newly build store Catalog , establish index.ts
import {
createPinia } from "pinia"
const store = createPinia()
export default store
The third step :main.ts Use in store
import {
createApp } from 'vue'
import store from '@/store'
const app = createApp(App)
app.use(store)
app.mount('#app')
Step four : newly build user.ts
import {
defineStore } from "pinia"
export const useUserStore = defineStore({
id:'user',
state() {
return {
name: '',
age: 0
}
}
})
Step five : stay vue Page usage
<template>
User:{
{ name }} == {
{ age }}
<br>
<button @click="fun"> Modified value </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>
result
Open the page , Click the page button , The displayed user information changes , Refresh the page and return to its original appearance .
Using plug-ins pinia-plugin-persist Persistence
First step : Installing a plug-in pinia-plugin-persist
npm install pinia-plugin-persist --save
The second step : modify store Under folder index.ts
import {
createPinia } from "pinia"
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store
The third step : modify user.ts, To add 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
}
]
}
})
notes : stay strategies You can specify which data to cache , such as :
strategies: [
{
storage: localStorage, paths: ['token','name'] }
]
test
Run the program , Open the page and click the button , Data changes , Close the page and open it again , The page still shows the changed data , here F12, Will see :
边栏推荐
- 【通信】两层无线 Femtocell 网络上行链路中的最优功率分配附matlab代码
- How about the order management of okcc call center
- Gold three silver four, don't change jobs
- Who said that new consumer brands collapsed? Someone behind me won
- Detailed explanation of regular expression (regexp) in MySQL
- Experiment 5: common automation libraries
- Without CD, I'll teach you a trick to restore the factory settings of win10 system
- STM32通过串口进入和唤醒停止模式
- Daily question brushing record (XV)
- 服务器SMP、NUMA、MPP体系学习笔记。
猜你喜欢
How rider uses nuget package offline
快讯 l Huobi Ventures与Genesis公链深入接洽中
The important data in the computer was accidentally deleted by mistake, which can be quickly retrieved by this method
MATLIB从excel表中读取数据并画出函数图像
每日刷题记录 (十五)
Per capita Swiss number series, Swiss number 4 generation JS reverse analysis
【2022全网最细】接口测试一般怎么测?接口测试的流程和步骤
自动化测试工具Katalon(Web)测试操作说明
Knowledge * review
B 站弹幕 protobuf 协议还原分析
随机推荐
Unity color palette | color palette | stepless color change function
How can Oracle CDC deserialize with jsondebeziumdeserializationschema
DAY FIVE
Common modification commands of Oracle for tables
Daily question brushing record (XV)
Eureka Client启动后就关闭 Unregistering application xxx with eureka with status DOWN
STM32 enters and wakes up the stop mode through the serial port
Where does this "judge the operation type according to the op value and assemble SQL by yourself" mean? It means simply using Flink tab
每日刷题记录 (十五)
Wasserstein Slim GAIN with Gradient Penalty(WSGAIN-GP)介绍及代码实现——基于生成对抗网络的缺失数据填补
JDBC programming of MySQL database
The worse the AI performance, the higher the bonus? Doctor of New York University offered a reward for the task of making the big model perform poorly
若依请求url中带有jsessionid的解决办法
短链的设计
Laravel8 uses passport authentication to log in and generate a token
How to find out if the U disk file of the computer reinstallation system is hidden
Automatic test tool katalon (WEB) test operation instructions
Without CD, I'll teach you a trick to restore the factory settings of win10 system
快讯 l Huobi Ventures与Genesis公链深入接洽中
How to implement Lua entry of API gateway