后台管理系统 筛选缓存

一般的列表页，上面都会有一个筛选

功能：刷新页面筛选条件不变；点击重置或切换页面则初始化查询条件

思路：

利用sessionStorage做缓存，根据不同的节点 调整缓存

created, 点击按钮,destoryed

data() {
    return {
        searchForm: { // 查询条件的包容字段
            name: ''
        } 
    }
}

created() {
    // 将初始查询条件缓存至sessionStorage
    storage.setSession('tempSearchForm', JSON.stringify(this.searchForm))
    
    // 查看之前有没有缓存查询条件
    this.searchFun({ vm: this, searchForm: 'searchForm', fn1: this.searchBtn, fn2: this.initData })
}

methods: {
    searchBtn() { // 查询
      // 将查询条件缓存至会话
      storage.setSession('searchQuerys', JSON.stringify(this.searchForm))
    },
    resetSearchQuerys() { // 重置查询条件
      this.searchFun({ vm: this, searchForm: 'searchForm', fn1: this.searchBtn, fn2:     this.initData, type: 'reset' })
    },
}

destroyed() { // 删除本页面的缓存 防止切换页面的时候读取上一个页面的数据
    storage.removeSession('searchQuerys')
}


// 将方法抽离到了store中
    searchFun(state, {vm, searchForm, fn1, fn2, type}) { // 筛选条件存储及数据请求 => 刷新页面不重置筛选条件    
      if (type == 'reset') {
        let _tmpReset = storage.getSession('tempSearchForm')
        vm.searchForm = JSON.parse(_tmpReset)
        storage.setSession('searchQuerys', _tmpReset)
        fn2 && fn2()
      }else{
        let _tmpSession = storage.getSession('searchQuerys')
        if (_tmpSession) { // 将查询参数还原
          console.log(JSON.parse(_tmpSession))
          vm.searchForm = JSON.parse(_tmpSession)
          fn1 && fn1()
        } else { // 正常初始化查询参数的请求
          fn2 && fn2()
        }
      }
// -------------------------------------
initData()  // 此页面的数据请求
searchBtn() // 查询方法
// 这两个方法可以合并到一起

tempSearchForm // 初始的查询条件
searchQuerys   // 改变后的查询条件