当前位置: 首页 > news >正文

vue3使用pinia实现数据缓存

文章目录

  • 前言
  • 一、pinia是什么?
  • 二、安装pinia
  • 三、注册pinia
  • 四、使用pinia
    • 定义数据及方法
    • 使用
  • 优化
    • `如有启发,可点赞收藏哟~`


前言

vue2以前一直使用vuex实现状态管理
vue3之后推出了pinia…


一、pinia是什么?

直观、类型安全、轻便灵活的Vue Store,使用具有DevTools支持的组合api

二、安装pinia

由于pinia本身没有提供设置缓存的功能,不过可以结合pinia-plugin-persistedstate实现

npm i pinia -S
npm i pinia-plugin-persistedstate -S

三、注册pinia

  • main.ts文件
import { createApp } from "vue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from "./App/index.vue";const app = createApp(App);
// 注册  pinia , 并在 pinia 使用 piniaPluginPersistedstate
app.use(createPinia().use(piniaPluginPersistedstate));
app.mount("#app");

四、使用pinia

大部分开发都默认在 stores 目录放置缓存相关文件

定义数据及方法

pinia有两种写法,其中一个是同vuex类似的选项式(这种才能结合pinia-plugin-persistedstate设置浏览器缓存),还有一个就是更符合vue3组合式写法

  • stores/mapState.ts (选项式)
import { defineStore } from "pinia";export interface MapState {address: string;
}
const { SIS_STORE_NAME } = import.meta.env;export const useMapStore = defineStore(SIS_STORE_NAME + "map", {state: (): MapState => ({address: "",}),getters: {},actions: {setAdress(address: string) {this.address = address;},clearMessage() {this.address = "";},},persist: {/*** 使用的存储* @default $store.id*/key: SIS_STORE_NAME + "map",/*** 存储位置* @default localStorage*/storage: sessionStorage,/*** 需要设置缓存的state 如果未设置即存储所有state* @default undefined*/// paths: [],/*** 存储之前* @default null*/beforeRestore: () => {},/*** 存储之后* @default undefined*/afterRestore: () => {},/*** 启用时在控制台中记录错误。* @default false*/debug: true,},
});
  • stores/counter.ts (组合式)
import { ref, computed } from "vue";
import { defineStore } from "pinia";export const useCounterStore = defineStore("counter", () => {const count = ref(0);const doubleCount = computed(() => count.value * 2);function increment() {count.value++;}return { count, doubleCount, increment };
});

使用

如果是字段数据,需要使用storeToRefs 获取为响应式的,方法不用
虽然上述两种定义不同,但调用使用方式是一样的

import { storeToRefs } from "pinia";
import { useMapStore } from "./stores/mapState";
import { useCounterStore } from "./stores/counter";const { address } = storeToRefs(useMapStore())
const { setAdress, clearMessage } = useMapStore()
setAdress('')
clearMessage()const { count } = storeToRefs(useCounterStore())
const { increment } = useCounterStore()
increment()
console.log(count)

优化

  • stores/index.ts
import type { App } from "vue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const store = createPinia().use(piniaPluginPersistedstate);// 全局注册 store
export function setupStore(app: App<Element>) {app.use(store);
}
export { store };
  • main.ts
import { createApp } from "vue";
import App from "./App/index.vue";
import { setupStore } from "./stores";
const app = createApp(App);
// 全局注册 状态管理(store)
setupStore(app)
app.mount("#app");

如有启发,可点赞收藏哟~

相关文章:

vue3使用pinia实现数据缓存

文章目录 前言一、pinia是什么&#xff1f;二、安装pinia三、注册pinia四、使用pinia定义数据及方法使用 优化如有启发&#xff0c;可点赞收藏哟~ 前言 vue2以前一直使用vuex实现状态管理 vue3之后推出了pinia… 一、pinia是什么&#xff1f; 直观、类型安全、轻便灵活的Vue …...

【CSS】min 和 max 函数(设置最大最小值)

文章目录 min() 函数&#xff1a;允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值 width: min(1vw, 4em, 80px);max() 函数&#xff1a;让你可以从一个逗号分隔的表达式列表中选择最大&#xff08;正方向&#xff09;的值作为属性的值 width: max(10vw, 4em, 80p…...

ip地址跟wifi有关系吗

​你可能已经听说过IP地址和Wi-Fi这两个词&#xff0c;但你有没有想过它们之间是否有关系呢&#xff1f;在这篇文章中&#xff0c;我们将深入探讨IP地址与Wi-Fi之间的密切联系。从基本概念到应用实例&#xff0c;虎观代理小二二将为您解答这个问题。 首先&#xff0c;让我们来了…...

[算法学习笔记](超全)概率与期望

引子 先来讲个故事 话说在神奇的OI大陆上&#xff0c;有一只paper mouse 有一天&#xff0c;它去商场购物&#xff0c;正好是11.11&#xff0c;商店有活动 它很荣幸被选上给1832抽奖 在抽奖箱里&#xff0c;有3个篮蓝球&#xff0c;12个红球 paper mouse能抽3次 蒟蒻的p…...

SpringCloud相关

文章目录 Gateway动态路由灰度策略 FeignRibbon SpringCloud五大组件分别对应&#xff08;1&#xff09;服务注册与发现&#xff08;2&#xff09;客服端负载均衡&#xff08;3&#xff09;断路器&#xff08;4&#xff09;服务网关&#xff08;5&#xff09;分布式配置 Gatewa…...

在 Linux 和 Windows 系统下查看 CUDA 和 cuDNN 版本的方法,包括使用 nvcc 命令

一直都比较头疼cuda与cudnn版本查看问题&#xff0c;两个系统不一样也不好查看&#xff0c;命令不通用 Linux 查看 CUDA 版本 方法一&#xff1a; nvcc --version或 nvcc -V如果 nvcc 没有安装&#xff0c;那么用方法二。 方法二&#xff1a; 去安装目录下查看&#xff…...

4.10每日一题(二元函数极值相关重要性质,反复学习)

...

idea项目中java类名出现带 j 小红点,如何解决?

目录 一、问题描述 二、问题解决方案 1、寻找异常问题 2、解决方案 2.1常规操作方法 2.2 快速操作方法 一、问题描述 一打开idea的java项目&#xff0c;发现所有的文件边上都有带J的大红点 虽然&#xff0c;在 git bash 中进行编译时无异常。 但是视觉上给人的感受就是…...

生产环境_移动目标轨迹压缩应用和算法处理-Douglas-Peucker轨迹压缩算法

场景&#xff1a; 我目前设计到的场景是&#xff1a;即在地图应用中&#xff0c;对GPS轨迹数据进行压缩&#xff0c;减少数据传输和存储开销&#xff0c;因为轨迹点太频繁了&#xff0c;占用空间太大&#xff0c;运行节点太慢了&#xff0c;经过小组讨论需要上这个算法&#x…...

HINSTANCE是什么?

HINSTANCE 就是 HMODULE&#xff1a;...

uniapp小程序定位;解决调试可以,发布不行的问题

遇见这个问题&#xff1b;一般情况就两种 1、域名配置问题&#xff1b; 2、隐私协议问题 当然&#xff0c;如果你的微信小程序定位接口没开启&#xff1b;定位也会有问题&#xff1b; 第一种&#xff0c;小程序一般是腾讯地图&#xff1b;所以一般都会用https://apis.map.qq.co…...

C++学习 --pair

目录 1&#xff0c; 什么是pair 2&#xff0c; 创建pair 2-1&#xff0c; 标准数据类型 2-2&#xff0c; 自定义数据类型 3&#xff0c; 查询元素 3-1&#xff0c; 标准数据类型 3-2&#xff0c; 自定义数据类型 1&#xff0c; 什么是pair 数据以键值对形式存放的容器&…...

Android Frgment中onActivityResult无效的问题

前言 最近在fragment中使用二维码扫描 发现拿不到onActivityResult返回 查了资料说是启动模式 或者是返回值为负数 断点调试 发现根本没走onActivityResult方法 问题 onActivityResult 在附属Activity中被拦截了 所以没有触发该方法 解决 在Fragment所依赖的Activity中执…...

【C#二开业务冠邑】通过界面查看数据来源

前言 重构框架&#xff08;CS【C#】转BS【Java】&#xff09;时&#xff0c;突然发现公司的代码和数据库&#xff0c;有部分都没有写注释&#xff0c;嘎嘎&#xff0c;这不非常影响开发效率&#xff0c;于是乎&#xff0c;开始帮公司整理表结构和数据来源&#xff0c;也从而加…...

使用大语言模型 LLM 做文本分析

本文主要分享 传统聚类算法 LLM与嵌入算法 嵌入算法聚类 LLM的其他用法 聚类是一种无监督机器学习技术&#xff0c;旨在根据相似的数据点的特征将其分组在一起。使用聚类成簇&#xff0c;有助于解决各种问题&#xff0c;例如客户细分、异常检测和文本分类等。尽管传统的聚…...

Windows本地搭建rtmp推流服务

前言 开发时偶尔需要使用rtmp直播流做视频流测试&#xff0c;苦于网上开源的rtmp视频流都已经失效&#xff0c;无奈只好尝试在本地自己搭建一个rtmp的推流服务&#xff0c;方便测试使用。 一、工具准备 Nginx&#xff1a;使用nginx-rtmp-win64推流工具FFmpeg&#xff1a;官方…...

机器学习二元分类 二元交叉熵 二元分类例子

二元交叉熵损失函数 深度学习中的二元分类损失函数通常采用二元交叉熵&#xff08;Binary Cross-Entropy&#xff09;作为损失函数。 二元交叉熵损失函数的基本公式是&#xff1a; L(y, y_pred) -y * log(y_pred) - (1 - y) * log(1 - y_pred)其中&#xff0c;y是真实标签&…...

Postgresql运维信息(一)

1. 运维系统视图 PostgreSQL 提供了一系列系统视图和函数&#xff0c;可以用于获取数据库的运维统计信息。这些信息对于监控和优化数据库性能非常有用。以下是一些常用的 PostgreSQL 运维统计信息&#xff1a; 1.1. pg_stat_activity 这个系统视图包含了当前数据库连接的活动…...

Jupyter Notebook的下载安装与使用教程_Python数据分析与可视化

Jupyter Notebook的下载安装与使用 Jupyter简介下载与安装启动与创建NotebookJupyter基本操作 在计算机编程领域&#xff0c;有一个很强大的工具叫做Jupyter。它不仅是一个集成的开发环境&#xff0c;还是一个交互式文档平台。对于初学者来说&#xff0c;Jupyter提供了友好的界…...

快速入门:构建您的第一个 .NET Aspire 应用程序

##前言 云原生应用程序通常需要连接到各种服务&#xff0c;例如数据库、存储和缓存解决方案、消息传递提供商或其他 Web 服务。.NET Aspire 旨在简化这些类型服务之间的连接和配置。在本快速入门中&#xff0c;您将了解如何创建 .NET Aspire Starter 应用程序模板解决方案。 …...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...