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

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

相关推荐
l1t27 分钟前
利用DeepSeek实现服务器客户端模式的DuckDB原型
服务器·c语言·数据库·人工智能·postgresql·协议·duckdb
喵手31 分钟前
玩转Java网络编程:基于Socket的服务器和客户端开发!
java·服务器·网络
再见晴天*_*1 小时前
SpringBoot 中单独一个类中运行main方法报错:找不到或无法加载主类
java·开发语言·intellij idea
lqjun08273 小时前
Qt程序单独运行报错问题
开发语言·qt
MarkHard1235 小时前
如何利用redis使用一个滑动窗口限流
数据库·redis·缓存
hdsoft_huge5 小时前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
风中的微尘5 小时前
39.网络流入门
开发语言·网络·c++·算法
雨白5 小时前
Java 多线程指南:从基础用法到线程安全
android·java
Hungry_Shark6 小时前
IDEA版本控制管理之使用Gitee
java·gitee·intellij-idea
赛姐在努力.6 小时前
《IDEA 突然“三无”?三秒找回消失的绿色启动键、主菜单和项目树!》
java·intellij-idea