vue3使用pinia和pinia-plugin-persist做持久化存储

插件和版本
在这里插入图片描述

1、安装依赖

npm i pinia // 安装 pinia
npm i pinia-plugin-persist // 安装持久化存储插件

2、main.js引入

在这里插入图片描述


import App from './App.vue'
const app = createApp(App)//pinia
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist' //持久化插件
const pinia = createPinia()
pinia.use(piniaPersist)
app.use(pinia)app.mount('#app')

3、在src下新建store文件,在store文件内新增home.js:

在这里插入图片描述

src/store/home.js(可直接复制)

import { defineStore } from 'pinia'
// useMain  可以是 useUser、useCart 之类的名字 返回的函数统一使用useXXX作为命名方案,这是约定的规矩
// defineStore('main',{..}) 在devtools 就使用 main 这个名
/*defineStore 是需要传参数的,其中第一个参数是id,就是一个唯一的值,
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象,里面有三个模块需要处理,
第一个是 state,第二个是 getters,第三个是 actions。
*/
export const useMain = defineStore('main', {// 相当于datastate: () => {return {// 所有这些属性都将自动推断其类型,如果推断失败可以试下 as xxxcounter: 0,name: 'Eduardo',objPer:{age:18,like: '唱跳rap'}}},// 相当于计算属性getters: {doubleCount: (state) => {return state.counter * 2},},// 相当于vuex的 mutation + action,可以同时写同步和异步的代码actions: {increment() {//this.是store实例this.counter++},randomizeCounter(num) {setTimeout(() => {//this.是store实例// this.counter = Math.round(100 * Math.random())this.counter = num}, 0);},},//配合pinia-plugin-persist插件 持久化 默认存储到 sessionStorage ,key 为 store 的 idpersist: {enabled: true,}
})

4、在页面A内使用获取值以及修改值(可直接复制)

<template><div>{{ name }}</div><div>counter:{{ counter }}</div><div>doubleCount:{{ doubleCount }}</div><div>objPer:{{ objPer }}</div><a-button @click="changeCounter">修改counter</a-button><br><a-button type="primary" @click="main.increment()">counter++</a-button><br><a-button @click="amend()">修改多个</a-button>
</template>
<script setup lang='ts'>//引入想要的pinia文件 {} 里面就是对应导出的名字
import { useMain } from '../store/home'
import { storeToRefs } from 'pinia';const main = useMain()
// 解构main里面的state和getters的数据,
// 使用storeToRefs解构才有响应式,响应式可以直接修改数据,不过这我只用来渲染
let { counter, name, doubleCount, objPer } = storeToRefs(main)//(常用方法三种)
//常用方法一: 使用数据
console.log(counter.value);
//使用方法(方法目前不能解构)
main.increment()
console.log(counter.value);// 常用方法二:修改数据
counter.value = 9999
console.log(counter.value);objPer.value = {age:1,like:'哎呦 你干嘛~'
}//常用方法三:
//进阶使用$patch,多个修改
const amend = () => {main.$patch((state) => {state.counter += 10;state.name = '张三'state.objPer = {age:11,like:'鸡你太美~'}})
}function changeCounter(){main.randomizeCounter(Math.round(100 * Math.random()))
}</script>

5、在页面B内引入并使用和查看值(可直接复制)


<template><div>objPer:{{ objPer }}</div><button @click="resetStore">重置pinia</button>
</template>
<script>
//引入想要的pinia文件 {} 里面就是对应导出的名字
import { useMain } from '../../store/home'
import { storeToRefs } from 'pinia';const main = useMain()
// 解构main里面的state和getters的数据,
// 使用storeToRefs解构才有响应式,响应式可以直接修改数据,不过这我只用来渲染
let { objPer } = storeToRefs(main)export default {name: 'test',setup () {// 重置piniafunction resetStore(){main.$reset()}// 将变量和函数返回,以便在模版中使用return {objPer,resetStore}}
}
</script>

6、查看值

在这里插入图片描述
在这里插入图片描述

参考文章1
参考2
参考3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/33072.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tomcat多实例与动静分离

实验&#xff1a;在一台虚拟机上配置多台tomcat 1.配置 tomcat 环境变量 vim /etc/profile.d/tomcat.sh source /etc/profile.d/tomcat.sh 2.修改 tomcat2 中的 server.xml 文件&#xff0c;要求各 tomcat 实例配置不能有重复的端口号 vim /usr/local/tomcat/tomcat2/conf/…

篇二十一:中介者模式:解耦对象之间的交互

篇二十一&#xff1a;"中介者模式&#xff1a;解耦对象之间的交互" 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/。 另外有2本不错的关于设计模式…

CAP理论与MongoDB一致性,可用性的一些思考

正文 大约在五六年前&#xff0c;第一次接触到了当时已经是hot topic的NoSql。不过那个时候学的用的都是mysql&#xff0c;Nosql对于我而言还是新事物&#xff0c;并没有真正使用&#xff0c;只是不明觉厉。但是印象深刻的是这么一张图片&#xff08;后来google到图片来自这里&…

【密码学】密码棒密码

密码棒密码 大约在公元前700年,古希腊军队使用一种叫做scytale的圆木棍来进行保密通信。其使用方法是这样的:把长带子状羊皮纸缠绕在圆木棍上,然后在上面写字;解下羊皮纸后,上面只有杂乱无章的字符,只有再次以同样的方式缠绕到同样粗细的棍子上,才能看出所写的内容。快速且不容…

python图片爬虫

#!/usr/bin/env python # -*- coding:utf-8 -*- import argparse import os import re import sys import urllib import json import socket import urllib.request import urllib.parse import urllib.error # 设置超时 import timetimeout 5 socket.setdefaulttimeout(time…

【程序员社交】多和高层次人群交流

定义问题&#xff1a;如何多和高层次人群交流获取经验提升自己&#xff1f; 收集信息&#xff1a;通过社交媒体、行业论坛、行业大会等途径获取高层次人群的信息和观点&#xff0c;并了解他们的工作经历、技能和能力。 分析信息&#xff1a;分析收集到的信息&#xff0c;了解…

Git全栈体系(六)

第十章 自建代码托管平台-GitLab 一、GitLab 简介 GitLab 是由 GitLabInc.开发&#xff0c;使用 MIT 许可证的基于网络的 Git 仓库管理工具&#xff0c;且具有 wiki 和 issue 跟踪功能。使用 Git 作为代码管理工具&#xff0c;并在此基础上搭建起来的 web 服务。GitLab 由乌克…

CBCGPRibbon 添加Edit、Combox、Hyperlink控件

编辑框、下拉框、网址按钮等是我们常用的控件&#xff0c;对应的类是 CBCGPRibbonEdit CBCGPRibbonComboBox CBCGPRibbonHyperlink 使用实例如下&#xff1a; //Edit CBCGPRibbonEdit* pEdit new CBCGPRibbonEdit(2001, 200); pEdit->SetReadOnly(TRUE); …

Kubernetes 二进制搭建

Kubernetes 二进制搭建 一、二进制搭建 Kubernetes v1.201.1 部署准备1.2 操作系统初始化配置1.3 部署 etcd 集群1.3.1 etcd 作为服务发现系统&#xff0c;有以下的特点1.3.2 准备签发证书环境1.3.3 在 master01 节点上操作1.3.4 生成证书 1.4 部署 docker引擎1.4.1 部署 Maste…

minio启动后访问不到api地址

本地docker 安装minio&#xff08;23版&#xff09;后界面能访问到&#xff0c;项目中api地址访问失败执行下面命令 docker run -d -p 9000:9000 -p 9001:9001 --name minio1 -v /home/minio/data:/data -e "MINIO_ROOT_USERminio" -e "MINIO_ROOT_PASSWORDmin…

Python-OpenCV中的图像处理-傅里叶变换

Python-OpenCV中的图像处理-傅里叶变换 傅里叶变换Numpy中的傅里叶变换Numpy中的傅里叶逆变换OpenCV中的傅里叶变换OpenCV中的傅里叶逆变换 DFT的性能优化不同滤波算子傅里叶变换对比 傅里叶变换 傅里叶变换经常被用来分析不同滤波器的频率特性。我们可以使用 2D 离散傅里叶变…

使用埋点方式对应用监控

在指标监控的世界里&#xff0c;应用和业务层面的监控有两种典型手段&#xff0c;一种是在应用程序里埋点&#xff0c;另一种是分析日志&#xff0c;从日志中提取指标。埋点的方式性能更好&#xff0c;也更灵活&#xff0c;只是对应用程序有一定侵入性&#xff0c;而分析日志的…

学习笔记|printf函数的实现|不同操作系统中的换行|数的进制:2进制、10进制、16进制转换|STC32G单片机视频开发教程(冲哥)|第五集:C语言基础

文章目录 1.C语言 printf函数的实现Tips&#xff1a;ASCII码表Tips&#xff1a;找不到头文件怎么办&#xff1f;主函数添加程序:常规用法:Tips&#xff1a;不同操作系统中的换行 ⒉数的进制:2进制、10进制、16进制.常见的对应&#xff1a;应用&#xff1a;整体端口的操作 3.C语…

SpringBoot禁用Swagger3

Swagger3默认是启用的&#xff0c;即引入包就启用。 <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artifactId><version>3.0.0</version> </dependency> <dependency><groupId…

Windows、 Linux 等操作系统的基本概念及其常见操作

Windows 和 Linux 是两种常见的操作系统&#xff0c;它们在计算机领域中广泛使用。下面我将为您介绍它们的基本概念以及一些常见的操作。 **Windows 操作系统&#xff1a;** 1. **基本概念&#xff1a;** Windows 是由微软公司开发的操作系统系列&#xff0c;旨在为个人计算机…

利用Arthas+APM监控进行Java性能深度定位

大家可能都用过APM监控&#xff0c;包括开源的Skywalking、商用的卓豪&#xff08;ZOHO&#xff09;ManageEngine APM应用性能监控、以及云监控产品如听云&#xff08;Server监控&#xff09;&#xff0c;这些APM监控产品大大方便了我们实时监控应用性能&#xff0c;并实现性能…

Redis_分片集群

10. 分片集群 10.1简介 业务场景&#xff0c;需要存储50G的数据。对于内存和硬盘配置不足&#xff0c;选用两种方式 一种&#xff1a;纵向扩展&#xff1a;加内存&#xff0c;加硬盘&#xff0c;提高CPU。简单、直接。RDB存储效率要考虑。成本要考虑。二种&#xff1a;横向扩…

日期切换

组件&#xff1a;<template><div class"time-picker"><el-radio-group size"small" v-model"timeType" change"changePickerType"><el-radio-button label"hour" v-if"isShow">时</el…

Vue [Day7] 综合案例

核心概念回顾 state&#xff1a;提供数据 getters&#xff1a;提供与state相关的计算属性 mutations&#xff1a;提供方法&#xff0c;用于修改state actions&#xff1a;存放异步操作 modules&#xff1a;存模块 功能分析 https://www.npmjs.com/package/json-server#ge…

如何学习大数据

文章目录 每日一句正能量前言一、什么是大数据二、大数据的应用领域三、社会对大数据的人才需求四、大数据的学习路线后记 每日一句正能量 多数人认为&#xff0c;一旦达到某个目标&#xff0c;人们就会感到身心舒畅。但问题是你可能永远达不到目标。把快乐建立在还不曾拥有的事…