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

vue数据持久化仓库

本文章是一篇记录实用性vue数据持久化仓的使用!
首先在src中创建store文件夹,并创建一个根据本页面相关的名称,

在终端导入:npm i pinia  和 npm i pinia-plugin-persistedstate

接下来引入代码:
 

import { defineStore } from "pinia";
import { order } from "../api/OrderForGoods";
const useOrder = defineStore('order',{state:()=>({data:[]}),actions:{async getOrder(){if(this.data.length ){return{data:this.data}}else{let url = await order()console.log(url);this.data = url.datareturn{data:url.data}}}},persist:{enable:true,storage:localStorage}
})
export default useOrder;

其中import { order } from "../api/OrderForGoods";引入本页面所要存储数据的接口,
import { order } from "../api/OrderForGoods";
这是先给一个初始值。为空,然后判断他啊的长度,data:this.data。这个最后点data,是接口中,返回数据的名称,有可能为res,有可能为list等等。。。
当第一次进入页面的时候会比较慢行。它是读取这个数组,然后将他储存到本地存储上面。等下次再进这个页面的时候,就不会在重新请求数据而产生白屏。









 

相关文章:

vue数据持久化仓库

本文章是一篇记录实用性vue数据持久化仓的使用! 首先在src中创建store文件夹,并创建一个根据本页面相关的名称, 在终端导入:npm i pinia 和 npm i pinia-plugin-persistedstate 接下来引入代码: import { defineSt…...

OrangePi AIpro评测 - 基础操作篇

0. 环境 ●OrangePi AIpro ●win10笔记本 ●路由器 准备下win10电脑、路由器,这些板卡通常是在网络正常的环境下才方便测试。 还要准备OrangePi AIpro的官方资料: http://www.orangepi.cn/html/hardWare/computerAndMicrocontrollers/service-and-suppo…...

不含一阶导数项的线性二阶微分方程的通解

假设这里有一个线性二阶微分等式,形式如下: (1) 其中是连续的,是在实闭区间是连续的,如果有人倾向于推广,在相对假弱的假设下,这个结果能够被发现。如果是下列其次线性方程的任意两个线性无关的…...

Redis篇 String

String概念和set,get扩充 一. String类型的基本介绍二. String中set,get方法扩充 一. String类型的基本介绍 redis中所有的key都是字符串类型的,但是value的类型差异很大. redis中的字符串,直接就是二进制方式存储的,可以存储整数,二进制数据 文本数据,Json,xml还有音频等. 二.…...

【vue-2】v-on、v-show、v-if及按键修饰符

目录 1、v-on事件 2、按键修饰符 3、显示和隐藏v-show 4、条件渲染v-if 1、v-on事件 创建button按钮有以下两种方式&#xff1a; <button v-on:click"edit">修改</button> <button click"edit">修改</button> 完整示例代码…...

华为交换机基础实验----VLAN基础

交换机篇实验&#xff1a; 给交换机创建VLAN 1.单个VLAN的创建 [S]vlan 10 查看的方法&#xff1a;dis vlan 2.批量创建vlan的方法 Vlan b 20 30 40 连续创建三个vlan&#xff0c;分别为vlan20 vlan30和vlan40 [SONY-S1-vlan10]vlan b 20 30 40 3.批量创建连续的vlan&#xf…...

Vue3学习使用axios和qs进行POST请求和响应处理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、前言1.准备工作2.发送POST请求3.处理响应数据4.总结 一、前言 在前端开发中&#xff0c;经常需要与后端进行数据交互&#xff0c;其中包括发送POST请求并处理响…...

张大哥笔记:赚钱高手养成计划---如何将一份时间产生N份收入?

我们常说的赚钱的四种境界有哪些&#xff1f; 1.靠体力挣钱 2.靠技能挣钱 3.靠知识挣钱 4.靠平台钱生钱 所以对应的收入的模式就会是下面4种模式&#xff1a; 1.一份时间卖1次 2.一份时间卖N次 3.一份时间溢价卖N次 4.购买他人时间为自己所用 时间对于每个人都是相同的…...

excel里如何将数据分组转置?

这个表格怎样转换为下表&#xff1f;按照国家来分组&#xff0c;把不同年份对应的不同序列值进行转置&#xff1f;&#xff1f; 这演示用数据透视表就完成这个数据转换。 1.创建数据透视表 选中数据中任意单元格&#xff0c;点击插入选项卡&#xff0c;数据透视表&#xff0c;…...

WHAT - 前端安全性测试和常见攻击手段

目录 一、安全性测试二、前端安全性测试三、跨站脚本&#xff08;XSS&#xff09;攻击1. 介绍2. 三大类型反射型 XSS&#xff08;Reflected XSS&#xff09;存储型 XSS&#xff08;Stored XSS&#xff09;DOM 型 XSS&#xff08;DOM-based XSS&#xff09; 3. xss 盲打4. xss 水…...

重量and体积,不要在傻傻的花冤枉钱寄快递了!

寄快递时有没有遇到过明明不重却被按体积收费的情况&#xff1f;别急&#xff0c;今天就来给大家揭秘快递收费的奥秘&#xff01; 实际重量和体积重量&#xff01; 首先&#xff0c;我们要明白两个概念&#xff1a;实际重量和体积重量。实际重量就是你看到的物品重量&#xf…...

docker ps显示的参数具体是什么意思

1&#xff0c;运行一个容器 docker run -d ubuntu:15.10 /bin/sh -c "while true; do echo hello world; sleep 1; done"这段命令的作用是使用 docker run 命令运行一个基于 ubuntu:15.10 镜像的 Docker 容器&#xff0c;并在容器中执行一个无限循环的命令。 具体解…...

【C++】多态:编程中的“一人千面”艺术

目录 一、多态的概念二、多态的定义及实现1.多态的构成条件2.虚函数的重写2.1 什么是虚函数&#xff1f;2.2 虚函数的重写是什么&#xff1f;2.3 虚函数重写的两个例外2.4 C11 override 和 final2.5 重载、覆盖(重写)、隐藏(重定义)的对比 三、抽象类3.1 概念3.2 接口继承和实现…...

【必备工具】gitee上传-保姆级教程

目录 1.gitee是什么 2.gitee怎么注册 ​编辑 3.gitee怎么提交代码 4.gitee的三板斧 Clone仓库 Q&A 1. Gitee 只有三板斧吗&#xff1f; 2. Git 教了&#xff0c;Gitee 上没有绿点怎么办&#xff1f; 3. 用户名和密码输入错误怎么办&#xff1f; 4. 操作时不小心…...

P1115 最长子段和

题目描述 给出一个长度为 &#x1d45b;n 的序列 &#x1d44e;a&#xff0c;选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数&#xff0c;表示序列的长度 &#x1d45b;。 第二行有 &#x1d45b;n 个整数&#xff0c;第 &#x1d456; 个整数表示序列的…...

02 FreeRTOS 任务

1、创建任务函数 1.1 动态内存的使用 在之前我们如果要创建一个与学生有关的任务&#xff0c;我们会定义&#xff1a; //打印50个学生的信息 char name[50][100]; int age[50]; int sex[50]; //1表示男&#xff0c;0表示女 int score[50]; 如果之后要对其进行修改会非常麻烦&…...

NSS题目练习4

[LitCTF 2023]1zjs 打开后是一个游戏&#xff0c;用dirsearch扫描&#xff0c;什么都没发现 查看源代码搜索flag&#xff0c;发现没有什么用 搜索php&#xff0c;访问 出现一堆符号&#xff0c;看样子像是jother编码 解码得到flag&#xff0c;要删掉[] [LitCTF 2023]Http pro …...

【算法】合并k个已排序的链表

✨题目链接&#xff1a; NC51 合并k个已排序的链表 ✨题目描述 合并 k 个升序的链表并将结果作为一个升序的链表返回其头节点。 数据范围&#xff1a;节点总数 0≤&#x1d45b;≤50000≤n≤5000&#xff0c;每个节点的val满足 ∣&#x1d463;&#x1d44e;&#x1d459;∣&…...

【Muduo】三大核心之EventLoop

Muduo网络库的EventLoop模块是网络编程框架中的核心组件&#xff0c;负责事件循环的驱动和管理。以下是对EventLoop模块的详细介绍&#xff1a; 作用与功能&#xff1a; EventLoop是网络服务器中负责循环的重要模块&#xff0c;它持续地监听、获取和处理各种事件&#xff0c;…...

ubuntu安装完桌面后如何启动

ubuntu安装完桌面后如何启动 在Ubuntu服务器上安装桌面环境后&#xff0c;您可以使用以下命令启动图形界面&#xff1a; sudo systemctl start gdm3如果您使用的是Ubuntu 20.04或更新版本&#xff0c;可能需要使用gdm3作为显示管理器。在早期的Ubuntu版本中&#xff0c;可能使…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

2025-05-08-deepseek本地化部署

title: 2025-05-08-deepseek 本地化部署 tags: 深度学习 程序开发 2025-05-08-deepseek 本地化部署 参考博客 本地部署 DeepSeek&#xff1a;小白也能轻松搞定&#xff01; 如何给本地部署的 DeepSeek 投喂数据&#xff0c;让他更懂你 [实验目的]&#xff1a;理解系统架构与原…...

GeoServer发布PostgreSQL图层后WFS查询无主键字段

在使用 GeoServer&#xff08;版本 2.22.2&#xff09; 发布 PostgreSQL&#xff08;PostGIS&#xff09;中的表为地图服务时&#xff0c;常常会遇到一个小问题&#xff1a; WFS 查询中&#xff0c;主键字段&#xff08;如 id&#xff09;莫名其妙地消失了&#xff01; 即使你在…...