vue数据持久化仓库

本文章是一篇记录实用性vue数据持久化仓的使用!

首先在src中创建store文件夹,并创建一个根据本页面相关的名称,

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

接下来引入代码:

Kotlin 复制代码
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.data
                return{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等等。。。

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

相关推荐
太阳的后裔27 分钟前
随笔一些用C#封装的控件
开发语言·c#
tianyuanwo28 分钟前
Rust语言组件RPM包编译原理与Cargo工具详解
开发语言·网络·rust·rpm
float_六七3 小时前
IntelliJ IDEA双击Ctrl的妙用
java·ide·intellij-idea
能摆一天是一天5 小时前
JAVA stream().flatMap()
java·windows
CodeCraft Studio5 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一5 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
睡觉的时候不会困5 小时前
Redis 主从复制详解:原理、配置与主从切换实战
数据库·redis·bootstrap
颜如玉5 小时前
🤲🏻🤲🏻🤲🏻临时重定向一定要能重定向🤲🏻🤲🏻🤲🏻
java·http·源码
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
星空寻流年7 小时前
设计模式第一章(建造者模式)
java·设计模式·建造者模式