一般的列表页,上面都会有一个筛选
功能:刷新页面筛选条件不变;点击重置或切换页面则初始化查询条件
思路:
利用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 // 改变后的查询条件