使用setStore和getStore缓存页面查询条件和当前页

缓存查询条件和当前页

实际应用中，很多时候当我们刷新页面时，本来的查询条件和页码都会置空和置零，这会带来很多不便。例如：当我们需要比较A页面和B页面的某个数据时，会需要在两个页面中来回切换，如果一直刷新页面就非常不方便。
解决方案如下：

1. 导入setStore和getStore

import { setStore, getStore } from '@/util/store';

2. 缓存数据

//缓存数据
cachePage() {
      const tmp = getStore({ name: 'all_page_cache' }) || [];
      if (
        tmp &&
        tmp.length > 0 &&
        tmp.find((res) => res.path === this.$route.path) !== undefined
      ) {
        tmp.map((res) => {
          if (res.path === this.$route.path) {
            res.pageSize = this.page.pageSize;
            res.form = this.query;
          }
        });
      } else {
        const arr = {
          path: this.$route.path,
          pageSize: this.page.pageSize,
          form: this.query
        };
        tmp.push(arr);
      }
      setStore({ name: 'all_page_cache', content: tmp, type: 'session' });
    },

//获取页面数据方法
getData(page,query){
  ......
  this.cachePage()
},

3. 获取缓存的数据

created() {
    // 获取 form 表单查询条件缓存
    const ALL_PAGE_CACHE = getStore({ name: 'all_page_cache' }) || [];
    const _this = this;
    ALL_PAGE_CACHE &&
    ALL_PAGE_CACHE.length > 0 &&
    ALL_PAGE_CACHE.map((res) => {
      if (res.path === this.$route.path) {
        _this.page.pageSize = res.pageSize;
        _this.query = {
          ...res.form
        };
      }
    });
    this.getData(this.page, this.query); //获取到缓存的数据后再调用方法
    this.form = this.deepClone(this.query);   //将获取到的数据赋值给form表单
  }
};