关于vue查询条件缓存

最新推荐文章于 2023-12-27 22:44:29 发布

一个程序猿cc

最新推荐文章于 2023-12-27 22:44:29 发布

阅读量579

点赞数

分类专栏： js vue 文章标签：前端

本文链接：https://blog.csdn.net/OUalen/article/details/132721204

版权

js vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

现在vue基本都是单页面，在通用的后台管理系统中，有很多的列表页面，详情页面。列表页面有众多的筛选条件，当我们根据筛选条件查询出数据后，点击详情，往往是跳转到一个新路由查看详情。这时候如果查询页面的筛选条件没有缓存，我们返回到详情页的时候，列表的筛选条件是会被重置的，又需要用户重新选择筛选条件。

如果需要缓存筛选条件，那么下面代码应该会对你有帮助！

function gusid(len, radix) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    var uuid = [], i;
    radix = radix || chars.length;
    if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
    } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';
        for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
                r = 0 | Math.random() * 16;
                uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
            }
        }
    }
    return uuid.join('');
}
var routerUtils = {};

routerUtils.install = function(Vue) {
    Vue.prototype.$addRouteFilter = function (options) {
        var id = gusid(8);
        let query = Object.assign({}, options.query, {filter: id});
        this.$router.push({name: options.routeName, query: query});
        var data = {
            id: id, 
            params: Object.assign({}, options.searchParams)
        }
        this.$store.commit('searchFilter/add', data);
    }
    Vue.prototype.$cleanRouteFilter = function () {
        this.$router.push({ name: this.$route.name, query: null }).catch(() => {});
    }
    Vue.prototype.$setSearchParams = function (callback) {      
        var filters = this.$store.state.searchFilter.filters;
        var query = this.$route.query;
        if(query && query.filter ) {
            var id = query.filter;
            filters.forEach((item)=>{
                if(id == item.id) {
                    if(item.params) callback && callback(item.params);
                }
            })
            
        }
    }
    Vue.prototype.$routeBack = function () {
        this.$router.back();
    }
}

export default routerUtils;

在main.js中将如上插件引入

import routerPlugins from './plugins/router';

Vue.use(routerPlugins);

项目中使用：

//查询按钮
search() {
	this.searchParams.currentPage=1;
	this.searchParams.pageSize=20;
	this.searchParams.orgIds = this.org.id;
	this.searchParams.orgNames = this.org.title;
	//将查询条件缓存起来	
    this.$addRouteFilter({routeName: 'special-equipment', searchParams: this.searchParams});
      this.getEqusData();
},

//执行查询
getEqusData() {
    //获取缓存的查询条件
	  this.$setSearchParams((data)=>{
	      this.searchParams = data;
	  	// console.log("查询条件",data)
	      this.org.id = data.orgIds;
	      this.org.title = data.orgNames || '请选择';
	  });
	  this.loading=true
      this.$http.get(url, this.searchParams).then((res) => {
        this.equList = res.items;
        this.total = res.total;
		this.loading=false;
      });
    }

//在页面created 或者 mounted中执行查询
created() {
	  // this.getEqusData();
  },
//在mounted中执行查询时，建议再页面渲染完后再执行，能避免不必要的坑！！！
  mounted() {
    this.$nextTick(()=>{
		this.getEqusData();
	})
  },