当前位置: 首页 > 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 应用程序模板解决方案。 …...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践&#xff0c;很多人以为AI已经强大到不需要程序员了&#xff0c;其实不是&#xff0c;AI更加需要程序员&#xff0c;普通人…...

如何通过git命令查看项目连接的仓库地址?

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...