当前位置:网站首页>[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 :
边栏推荐
- 【精品】pinia 基于插件pinia-plugin-persist的 持久化
- 达晨史上最大单笔投资,今天IPO了
- Scholar doctor hahaha
- 《数字经济全景白皮书》保险数字化篇 重磅发布
- flinksql select id ,count(*) from a group by id .
- Newsletter L Huobi ventures is in-depth contact with genesis public chain
- MATLIB reads data from excel table and draws function image
- 内网穿透zerotier 外网(手机、电脑等)访问内网设备(树莓派、NAS、电脑等)
- 自动化测试工具Katalon(Web)测试操作说明
- (LeetCode)两数之和
猜你喜欢
app通用功能測試用例
Close unregistering application XXX with Eureka with status down after Eureka client starts
Matplotlib draws a histogram and adds values to the graph
1000字精选 —— 接口测试基础
Basic chart interpretation of "Oriental selection" hot out of circle data
基于jsp+servlet+mysql框架的旅游管理系统【源码+数据库+报告】
How rider uses nuget package offline
app通用功能测试用例
Cas d'essai fonctionnel universel de l'application
Please help xampp to do sqlilab is a black
随机推荐
[212] what are three methods for PHP to send post requests
Hydrogen future industry accelerates | the registration channel of 2022 hydrogen energy specialty special new entrepreneurship competition is opened!
Without CD, I'll teach you a trick to restore the factory settings of win10 system
Wasserstein slim gain with gradient poverty (wsgain-gp) introduction and code implementation -- missing data filling based on generated countermeasure network
How much does the mlperf list weigh when AI is named?
Scholar doctor hahaha
MySQL implementation of field segmentation from one line to multiple lines of example code
1000字精选 —— 接口测试基础
Per capita Swiss number series, Swiss number 4 generation JS reverse analysis
DAY FOUR
app通用功能測試用例
谁说新消费品牌大溃败?背后有人赢麻了
DevOps可以帮助减少技术债务的十种方式
Experiment 5: common automation libraries
MySQL主从之多源复制(3主1从)搭建及同步测试
基于SSM框架实现的房屋租赁管理系统
Basic chart interpretation of "Oriental selection" hot out of circle data
Gradle知識概括
MATLIB reads data from excel table and draws function image
The programmer said, "I'm 36 years old, and I don't want to be rolled, let alone cut."