vuex配合mixin打造手动缓存页面数据方案

思路概述

  • 利用路由的beforeRouteLeave钩子,离开页面的时候把要保存的数据存到Vuex上
  • 把存取和钩子等业务关系不大的过程,放到mixin里进行引入

keep-alive缓存遇到的问题

因为我采用的是JQuery插件Datatables,所以表格的操作过程多数是DOM类操作,使用Keep-alive配合自定义的tab菜单的时候,需要在activated钩子中进行表格重新绘制,否则会出现表格错位计算不对高度的问题。所以我打算自己用最小的代码改动量来实现手动缓存表格数据,分页数据,以及搜索条件数据。

处理办法

因为页面会有多个,所以要设置动态的缓存对象到Vuex,我最终采用的是页面名称,也就是this.$options.name。

大概思路是把对应要缓存的数据在页面离开的时候,包裹在一个对象里,然后把页面名称也塞到这个对象里作为一个参数,一起commit到store中。

    beforeRouteLeave(to, from, next) {
        let datas = {
            tableDatas: this.get.tableDatas,
            searchItems: this.searchItems,
            page: this.page,
            total: this.total,
            title: this.$options.name
        };
        this.$store.commit('cacheTableDatas', datas); // vuex
        next();
    },

 

在store中的接受也很重要

state: {
        tableStore: {
        }

    },
    mutations: {
        cacheTableDatas(state, datas) {
            state.tableStore[datas.title] = datas 
        },
    }

 

改写原有页面,在原有页面获取数据之前,先判断是否有缓存,如果有的话,就先读缓存,否则读数据

        _checkCache() {
            let title = this.$options.name
            if (this.tableStore[title]) {
                // vuex
                this._getCacheDatas();
            } else {
                this.getDataList();
            }
        },

        _getCacheDatas() {
            // vuex
            let tableStore = this.tableStore[this.$options.name];
            this.get.tableDatas = tableStore.tableDatas;
            this.page = tableStore.page;
            this.total = tableStore.total;
            this.searchItems = tableStore.searchItems;
        },

 

最后可以把以上内容全都放到mixin里,原来的业务代码页面,只需要在获取基础数据方法之前加上一个this._checkCache()即可。

分享