vue项目实现列表页状态缓存并按需刷新

项目中特别是移动端项目比较常见的场景，从详情页面返回列表，列表页面的状态需要被缓存起来保持不变，但是如果详情页面有对数据进行操作，那么返回列表页又是需要刷新列表的。通常情况页面需要被缓存我们很容易想到用keepalive结合路由配置meta熟悉去实现，刷新列表我们一般就直接放在生命周期activated里了（我之前偷懒的时候，还有我的同事就是这么操作的~），这样每次页面显示都会刷新列表数据，作为一个还有点追求的程序员，我知道这样很浪费，很多时候我们就是打开详情看下数据，并不会更新数据，思考鼓捣测试了一下，我是这样实现的：

项目内加事件总线

new Vue({
    router,
    store,
    beforeCreate() {
        Vue.prototype.$bus = this  // 安装全局事件总线
    },
    created() {
    },
    render: h => h(App)
}).$mount('#app');

利用事件总线及事件订阅通知列表页面是否刷新，实现按需刷新

created () {     
    this.recordList();
},
activated() {
    if(this.needFresh) {      // 有数据更新，才需要刷新列表数据  
        this.recordList();    // 此为更新列表数据方法
        this.needFresh = false;
    }
    this.$bus.$off('dataFresh');
    this.$once('hook:deactivated',() => this.$bus.$once('dataFresh', () => {     // 页面隐藏时订阅dataFresh事件
        this.needFresh = true;
    }))
}

在其它（详情）页面有更新数据时，后面加上这样一句代码

this.$bus.$emit('dataFresh')   // 通知列表页有数据更新啦，你等会得刷新下

needFresh初始值为false,当下级页面通知列表页需要数据更新时设置为true，列表页展示的时候只有在needFresh为true时才会刷新列表，这就实现了按需刷新。