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等等。。。
当第一次进入页面的时候会比较慢行。它是读取这个数组,然后将他储存到本地存储上面。等下次再进这个页面的时候,就不会在重新请求数据而产生白屏。









 

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

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

相关文章

Python Anaconda环境复制

虚拟环境复制 conda-pack 第一种方式 conda打包 在打包之前如果没有conda-pack包的话,需要安装pip install conda-pack打包 conda pack -n py36 -o py366.tar.gz -o就是给导出得到的压缩包就在当前目录下 传输到另外一台服务器上 有两台linux服务器&#xff0c…

有哪些永久免费的进销存管理软件?

我明白许多中小企业在寻求进销存系统时,希望能找到一款完全免费的解决方案,以减轻经济压力。这种心态非常正常,毕竟成本是任何企业都需要仔细考虑的因素。然而,我要强调的是,市场上那些声称“完全免费”的进销存系统&a…

东子哥:从来不拼搏的人,不是我的兄弟!新一轮裁员潮即将来临!

今年初,包括微软、亚马逊、谷歌母公司Alphabet等在内的巨头先后宣布裁员计划,曾掀起了一轮裁员潮。 进入年中阶段,特斯拉、理想汽车、TikTok、安德玛等知名巨头,也先后宣布裁员计划,难道,新一轮裁员潮已经…

OrangePi AIpro评测 - 基础操作篇

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

第八届能源、环境与材料科学国际学术会议(EEMS 2024)

文章目录 一、重要信息二、大会简介三、委员会四、征稿主题五、论文出版六、会议议程七、出版信息八、征稿编辑 一、重要信息 会议官网:http://ic-eems.com主办方:常州大学大会时间:2024年06月7-9日大会地点:新加坡 Holiday Inn …

[NISACTF 2022]easyssrf、[NISACTF 2022]level-up

[NISACTF 2022]easyssrf 使用dirsearch扫描后没发现什么路径 尝试访问127.0.0.1,成功了 访问127.0.0.1/flag.php提示有文件/fl4g 使用file://协议读取文件/fl4g,提示除此页面外还有一个ha1x1ux1u.php页面。 file:///fl4g 直接访问,发现GET…

鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】

媒体查询 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 : gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 导入模块 import mediaquery from ohos.media…

2024斯佩菈音乐剧暑假训练营 30天创造奇迹培育坚强自信好少年

以声问本,素质教育,融会中西,知行合一。音乐是生活的灵魂,艺术的真正意义在于使人幸福,得到鼓舞和力量。多一把衡量的尺子,就会多出一批好学生。 相对学校语数英等学科教育,孩子心灵成长方面很…

最新扣子(Coze)实战教程:扣子​使用基础,完全免费,快来学习吧~

🧙‍♂️ 诸位好,吾乃斜杠君,编程界之翘楚,代码之大师。算法如流水,逻辑如棋局。 📜 吾之笔记,内含诸般技术之秘诀。吾欲以此笔记,传授编程之道,助汝解技术难题。 &#…

【数据结构】链式二叉树(超详细)

文章目录 前言二叉树的链式结构二叉树的遍历方式二叉树的深度优先遍历前序遍历(先根遍历)中序遍历(中根遍历)后序遍历(后根遍历) 二叉树的广度优先遍历层序遍历 二叉树链式结构接口实现二叉树结点个数二叉树叶子结点个数二叉树的深度(高度)二叉树第k层结…

“AURORA-M:首个遵循人类审查安全指令微调的开源多语言模型

在人工智能领域,多模态学习是一个日益增长的研究领域,它涉及将来自不同源(如图像、文本、音频等)的信息结合起来。但高昂的训练计算成本限制了模型的普及性,使得小型机构和个人难以负担。而且现有模型在多语言能力上受…

Unity LayerMask避坑笔记

今天使用Physics2D.OverlapAreaNonAlloc进行物理检测时候,通过LayerMask.NameToLayer传入了int值的LayerMask,结果一直识别不到,经过Debug才找到问题,竟是LayerMask的“值”传输有问题,记录一下。 直接贴代码输出结果&…

爬虫学习1

爬虫网站:All products | Books to Scrape - Sandbox 豆瓣网:豆瓣电影 Top 250 我们需要安装一个第三方库来解析爬取到的html内容,终端输入pip install bs4,安装成功后引入需要的模块 我们先爬取所有的价格 import requests from bs4 import…

HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第9章动手实践

文章目录 效果代码网盘 效果 代码 index.html <!doctype html> <html> <head> <meta charset"utf-8"> <title>通栏效果</title> <link rel"stylesheet" type"text/css" href"index.css"> …

linux系统更改SSH端口号配置

1.编写sshd.config cd /etc/ssh sudo cp sshd_config sshd_config.bak vim sshd_config2.重启服务 systemctl restart sshd 结束&#xff01;&#xff01;

【UE5.1 角色练习】08-物体抬升、抛出技能

前言 在上一篇&#xff08;【UE5.1 角色练习】08-传送技能&#xff09;的基础上继续实现控制物体抬升、抛出的功能。 效果 步骤 一、准备技能动画 1. 在项目设置中新建一个操作映射&#xff0c;这里命名为“Skill_GravityControl”&#xff0c;用按键4触发 2. 通过IK重定向…

aws emr启动standalone的flink集群

关键组件 Client&#xff0c;代码由客户端获取并做转换&#xff0c;之后提交给JobMangerJobManager&#xff0c;对作业进行中央调度管理&#xff0c;获取到要执行的作业后&#xff0c;会进一步处理转换&#xff0c;然后分发任务给众多的TaskManager。TaskManager&#xff0c;数…

【mysql】ubuntu下安装数据库

1更新软件包 sudo apt update //更新软件包2安装数据库 sudo apt install mysql-server//安装数据库注意后面mysql-server是个整体 3安全设置配置 sudo mysql_secure_installation//安全设置配置你要设置验证密码吗&#xff1f; 输入设置密码安全等级&#xff08;0,1&am…

nginx文件解析漏洞测试

环境条件:ubuntu14,已安装docker,docker pull ubuntu:14.04.5 一、Nginx配置 1、使用docker启动容器&#xff1a; docker run -itd --name ubuntu -p 8088:80 ubuntu:14.04.5 2、进入容器&#xff1a; docker exec -it ubuntu /bin/bash 3、然后使用以下语句安装相关环境…

C++基础:类的继承,public,private,protected

三种继承模式 在上图中: 派生继承 三种继承模式 protected模式中 父类的公有属性和保护属性的成员在子类中都会变为保护属性,只能通过父类或者子类的成员函数调用. 代码示例: #include <iostream> #include <string> using namespace std; //protected class per…