一次性加载数据，前端分页(sesstionStorage)

在项目中，前端显示数据的时候，很多地方需要用到分页，通常有两种方式：
一：点击页码的时候，请求后台服务器得到每一页数据，在前台进行显示
二：后台一次性将数据加载至前端，有前端js控制分页

刚好在最近的项目中，遇到了，在这里进行一些总结。

需求与问题分析：

1. 无脑的做法就是把，数据丢页面上就完事。
2. 进行前端分页

当然如果说数据量少的情况下，采用第一种方案也时可以的。
这里我采用第二种分案。

这是项目我所需要点的分页，添加数据和删除数据都是前端先对进行假删除后，用户点击确定按钮后，在交给后台进行对应的处理。那么我们只少要解决如下几个问题：

1. 点击新增后表格添加一调数据，并进行分页信息计算
2. 分页数据切换时要把当前的分页数据进行本地保存
3. 删除与批量删除后进行，分页计算
   其实归根到底就是控制好修改后的数据在做任何操作时都要先进行比本地保存, 再就是改动数据后要进行分页计算。

代做逻辑

import uuid from 'uuid'
import event from 'events'
import {
   observable} from 'mobx'
const keyConcat = (key) => `_EDIT_SAMPLE_${
     key}`;

const DEFAULT_PAGE_SIZE = 30;

/**
 * 排序
 * @param {array} arr arr
 * @param {function} func 每次执行的函数
 * @returns {array} 排序后的数据
 */
default function sort(arr, func){
   
    let len = arr.length;
    if(arr.length === 1){
   
        return arr;
    }
    for(let i = 0; i < len; i++){
   
        for(let j = i; j < len - 1; j++){
   
            if(func(arr[j + 1], arr[i])){
   
                let tmp = arr[i];
                arr[i] = arr[j + 1];
                arr[j + 1] = tmp;
            }
        }
    }
    return arr
}
/*
* 本地列表分页数据存贮
* */
default class StorageStore extends event{
   
    @observable pageSize; //每页显示条数
    @observable _currentPage = 1; //当前所在分页
    @observable key