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等等。。。

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

相关推荐
wuxuanok2 分钟前
Web后端开发-分层解耦
java·笔记·后端·学习
周胡杰18 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
wkj00121 分钟前
navicate如何设置数据库引擎
数据库·mysql
赵渝强老师24 分钟前
【赵渝强老师】Oracle RMAN的目录数据库
数据库·oracle
暖暖木头26 分钟前
Oracle注释详解
数据库·oracle
kyle~34 分钟前
C/C++字面量
java·c语言·c++
纨妙39 分钟前
python打卡day59
开发语言·python
neoooo42 分钟前
别慌,Java只有值传递——一次搞懂“为啥我改了它还不变”!
java·后端·spring
秋难降43 分钟前
Python 知识 “八股”:给有 C 和 Java 基础的你😁😁😁
java·python·c
御控工业物联网43 分钟前
御控网关如何实现MQTT、MODBUS、OPCUA、SQL、HTTP之间协议转换
数据库·sql·http