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

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

Mac flutter环境搭建

一、下载flutter sdk 制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 1、查看mac电脑处理器选择sdk 2、解压 unzip ~/Downloads/flutter_macos_arm64_3.32.2-stable.zip \ -d ~/development/ 3、添加环境变量 命令行打开配置环境变量文件 ope…...

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...