# dataTool 数据工具

# DataCache(key, seconds, getData)

key:string - 标识
seconds:number - 缓存过期时间,单位:秒
getData:Promise - 加载最新数据

该方法主要用于数据在一定时间范围内的缓存。超出设定的时间,则重新加载数据,并将数据保存至H5缓存。

import {DataCache,Ajax} from '@/utils/index'
DataCache('token',1000,()=>{
    return Ajax.get(url,data);
}).then(data=>{
    //do something
});

# LocalPaging 前端数据分页

使用场景:前端一次性加载所有数据后,需要在前端进行分页展示

# 属性

属性名称 属性类型 说明
data Array 所有数据
pageData Array 当前页数据
limit Number 每页数据条数
page Number 当前页码
maxPage Number 总页码

# 方法

方法签名 说明 参数说明 备注
init(data) 重新加载数据源 data:Array<Object>,数据集,必传 加载后,会自动展示第一页
resetLimit(limit) 重新制定分页大小 limit:Number 调用该方法会自动跳转到第一页
compute() 计算总页数 -- --
selectPage(pageNum) 跳转到指定页码 pageNum:Number --
lastPage() 转到上一页 --
nextPage() 转到下一页 --

# DEMO

import {LocalPaging} from '@/utils/index';

const store = new LocalPaging(data);
store.selectPage(1);
store.lastPage();
store.nextPage();

# PageStore 服务端分页

使用场景:移动端需要分页加载

# 属性

属性名称 属性类型 说明
data Array 所有数据
mode String Ajax请求方式,默认为get
useTotalPage Boolean 是否需要计算总页码
api String 接口地址
limit Number 每页显示数据条数
status Object 状态信息

# status

属性名称 属性类型 说明
pageNum Number 当前页码
isEnd Boolean 是否没有更多数据了
isLoading Boolean 数据加载中
isEmpty Boolean 是否没有任何数据
totalPage Number 总页码

# 方法

# clear

清除所有数据,并重置status

# load

load(api, paras) :加载下一页数据 api:接口地址,可不传入 paras:object,需要发送到后端的额外数据

# buildPara

构造传递给后端的查询参数。返回类型为Object。
可重载,重载时务必注意,该方法体内部的this是指向实例本身,而非vue页面

buildPara() {
        return {
            limit: this.limit,
            offset: (this.status.pageNum - 1) * this.limit
        }
    }

# filter

数据请求后,对数据进行处理,使之符合统一的预定义格式。返回格式为。
多数情况下,需要在实例中重写该方法。

{
    "data":[],
    "total": 123
}

# 事件

# onChange(data, status)

分页加载,或者参数改变时,均触发该事件

# DEMO

<template>
    <view class="a-page no-padding">
        <view class="p-goods-item a-flex-space-between" v-for="(item,index) of store.data" :key="index">
        </view>
        <load-status :status="store.status"></load-status>
    </view>
</template>

    import {Ajax, kDate, PageStore} from "@/utils/index";
    import {AppConfig} from "@/appConfig";

    export default {
        name: "stock",
        data() {
            return {
                store: new PageStore(),
            }
        },
        onLoad() {

            this.store.api = AppConfig.api.wallet.goods_stock;
            this.store.mode = 'post';
            this.store.limit = 10;
            this.store.filter = function (list) {
                list = list || [];
                list.forEach(function (item) {
                    //do something
                });
                return {
                    data: list
                }
            };
            this.store.buildPara = function () {//这里必须是function,不能用()=>
                return {
                    page: this.status.pageNum,
                    curpage: this.limit
                }
            };
            this.loadList();
        },

        onReachBottom() {
            this.loadList();
        },
        methods: {
            /**
             * 加载分页数据
             */
            loadList() {
                this.store.load().catch(() => {
                });
            },
        }
    }

# SearchPara 查询参数

# SearchStore 前端数据检索

使用场景:前端一次性加载所有数据,之后用户在前端操作时,直接从前端缓存的数据中进行搜索,而无需每次都调用后端接口。

# 属性

属性名称 属性类型 说明
data Array 所有数据
result Array 检索后的数据
paras Object 查询条件

# 方法

方法签名 说明 参数说明 备注
setData(data) (重新)加载数据源 data:Array<Object>,数据集,必传 加载后,会立即执行搜索
delPara(key) 移除指定查询参数 key:String,参数名称,必传
clearPara() 移除所有查询参数 -- --
setPara(key, value) 设置查询参数 -- --

# 事件

方法签名 说明 参数说明 备注
onChange(result) result改变时触发

# setPara

参数

key:String,参数名称,必传
value:string|number|boolean|function|array,参数值,必传

根据value的类型不同,执行不同的过滤行为

string:模糊匹配
number、boolean:精确匹配
function:调用Array的filter方法进行自定义搜索
array:精确匹配数组中任意一项

# DEMO

import {SearchStore} from '@/utils/index';

const data = {
	"success": true,
	"total": 2,
	"msg": "成功",
	"data": [
		{
			"id": 1,
			"name": "张三",
			"isAdmin": true
		},
		{
			"id": 2,
			"name": "李四",
			"isAdmin": false
		}
	]
};

const store = new SearchStore();

store.setData(data);
//string
store.setPara('name', '张三');


//Boolean
store.clearPara();
store.setPara('isAdmin', true);
//Number
store.clearPara();
store.setPara('id', 1);
//function
store.clearPara();
store.setPara('diy', function (item) {
	return item.isAdmin || item.name === '张三';
});
//以上4个setPara在本Demo中均返回同样的结果
Last Updated: 3/25/2020, 5:21:58 PM