Mixin实现自动保存搜索状态

最新推荐文章于 2025-02-25 20:28:03 发布

原创最新推荐文章于 2025-02-25 20:28:03 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #mixins

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

混入

1 篇文章

订阅专栏

本文介绍如何使用Vue.js的mixin来自动保存和恢复组件的搜索参数状态，通过监听路由query和组件内部变量，确保跨页面跳转时搜索条件得以保留。

Mixin实现自动保存搜索状态

定义一个mixin（对象）结构跟vue中script标签内的结构相同
mixin中可使用组件中的变量等资源，反之组件中也可使用mixin对象中的资源，简称互相调用（先加载mixin中）

下面通过路由query保存搜索参数看一下
mixin对象

export default {
    //先加载这里的created，之后才是组件内
    created(){
        this.setSearchData();
    },
    methods: {
        //iview page组件改变page
        changePage(page){
            //page 改变页数（后台page从0开始，所以page - 1）
            this.search.page = page - 1;
        },
        setSearchData(){
            //判断是否存在query
            if(this.$route && JSON.stringify(this.$route.query) != '{}'){
                //存在则赋值给searchParams（这里的searchParams不是mixin的变量
                //而是引用组件的searchParams，所谓的互相调用）
                let searchObj = JSON.parse(decodeURI(this.$route.query.search));
                Object.keys(searchObj).forEach(key => {
                    // 赋值存在的key--用于别的页面跳转传部分参数
                    this.search[key] = searchObj[key];
                })
            } else {
                // 第一次加载页面的时候，获取组件的searchParams，设置到路由的query中
                this.setRouterQuery();
            }
        },
        //设置路由参数
        setRouterQuery(){
            if(this.search){
                this.$router.replace({ path: this.$route.path, query: {search: encodeURI(JSON.stringify(this.search))}});
            }
        }
    },
    watch: {
        'search': {
            handler(){
                //监听所引用组件内的searchParams，有变化就设置到路由当中去
                this.setRouterQuery();
                //掉查询结构，注意使用的也买你当中查询数据的方法名称一定要对应这个
                this.findBySearch();
            },
            deep: true
        }
    }
}

只需要在使用的组件内引入就OK~（如下）

import pageMixins from '../../mixins/pageMixins';
export default {
        mixins: [pageMixins],
        data(){
        	return {
        		count: 0, 
        		// 监听的参数变量
				search: {
					page: 0,
					size: 13
				}
			}
        },
        // 查询数据函数
        findBySearch(){
            this.$api.getActivityList(this.search)
                .then(res => {
                    this.activityList = res.result;
                    this.count = res.count;
                })
        }
}

对应的iview page组件如下

<Page :total="count" size="small" :current="search.page + 1" @on-change="changePage" :page-size="search.size" />