当前位置:网站首页>[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 :
边栏推荐
- Server SMP, NUMA, MPP system learning notes.
- How can Oracle CDC deserialize with jsondebeziumdeserializationschema
- The same job has two sources, and the same link has different database accounts. Why is the database list found in the second link the first account
- 达晨史上最大单笔投资,今天IPO了
- 【自动化测试框架】关于unittest你需要知道的事
- Today, I met a senior test developer from Tencent and saw the ceiling of the foundation
- Let me ask you if there are any documents or cases of flynk SQL generation jobs. I know that flynk cli can create tables and specify items
- 若依请求url中带有jsessionid的解决办法
- The programmer said, "I'm 36 years old, and I don't want to be rolled, let alone cut."
- 自动化测试工具Katalon(Web)测试操作说明
猜你喜欢
Hydrogen future industry accelerates | the registration channel of 2022 hydrogen energy specialty special new entrepreneurship competition is opened!
Eureka Client启动后就关闭 Unregistering application xxx with eureka with status DOWN
Can online reload system software be used safely? Test use experience to share with you
资产安全问题或制约加密行业发展 风控+合规成为平台破局关键
若依请求url中带有jsessionid的解决办法
After 3 years of testing bytecan software, I was ruthlessly dismissed in February, trying to wake up my brother who was paddling
Example code of MySQL split string as query condition
leetcode:236. The nearest common ancestor of binary tree
The best sister won the big factory offer of 8 test posts at one go, which made me very proud
How much does the mlperf list weigh when AI is named?
随机推荐
快手的新生意,还得靠辛巴吆喝?
PDF文档签名指南
JS import excel & Export Excel
Wasserstein slim gain with gradient poverty (wsgain-gp) introduction and code implementation -- missing data filling based on generated countermeasure network
Scholar doctor hahaha
Rider离线使用Nuget包的方法
Summary of three methods for MySQL to view table structure
A novice asks a question. I am now deployed on a single machine. I submitted an SQL job and it runs normally. If I restart the service job, it will disappear and I will have to
Zero code and high return. How to use 40 sets of templates to meet 95% of the reporting needs in the work
How rider uses nuget package offline
Can async i/o be implemented by UDF operator and then called by SQL API? At present, it seems that only datastre can be seen
Design a red envelope grabbing system
[unmanned aerial vehicle] multi unmanned cooperative task allocation program platform, including Matlab code
How about the order management of okcc call center
Entropy information entropy cross entropy
[system analyst's road] Chapter 7 double disk system design (service-oriented development method)
How to implement Lua entry of API gateway
There are only two TXT cells in the ArrayExpress database. Can you only download the sequencing run matrix from line to ENA?
(LeetCode)两数之和
在docker中快速使用各个版本的PostgreSQL数据库