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

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

相关推荐
没有羊的王K23 分钟前
SSM框架学习DI入门——day2
java·spring boot·学习
公子绝24 分钟前
JAVA学习笔记 使用notepad++开发JAVA-003
java·学习·notepad++·java开发环境
似璟如你32 分钟前
Java开发八股文之基础篇+spring+集合
java·开发语言·面试
本杰明15233 分钟前
2025/7/14——java学习总结
java·开发语言·学习
2345VOR39 分钟前
【C#地图显示教程:实现鼠标绘制图形操作】
开发语言·c#·计算机外设·地图显示鼠标交互
丁丁点灯o41 分钟前
Oracle日期时间函数说明及与MySql区别说明
数据库·mysql·oracle
qq_1578520743 分钟前
Oracle 查找连续日期连续小时
数据库·sql·mysql
开开心心_Every44 分钟前
可增添功能的鼠标右键优化工具
开发语言·pdf·c#·计算机外设·电脑·音视频·symfony
星释1 小时前
优雅的Java:01.数据更新如何更优雅
java·开发语言·spring boot
The_era_achievs_hero1 小时前
微信131~140
开发语言·javascript·微信