242 Caching Http Response Data

为Coaches添加缓存

步骤

1、index.js中添加lastFetch变量

lastFetch: null, // timestamp of last fetch

2、mutations.js中添加如下函数用于记录时间戳

setFetchTimestamp(state, payload){
        state.lastFetch = new Date().getTime();
    }

3、actions.js loadCoaches添加如下代码记录获取数据的时间戳

context.commit('setFetchTimestamp');

4、getters.js中添加如下代码用于设置缓存过期时间（这里是60秒）

shouldUpdate(state){
        const lastFetch = state.lastFetch;
        if(!lastFetch){
            return true;
        }
        const currentTimeStamp = new Date().getTime();
        return (currentTimeStamp - lastFetch) / 1000  > 60;
    }

5、actions.js loadCoaches最前面添加如下代码用于控制是否需要从数据库重新加载数据

if(!payload.forceRefresh && !context.getters.shouldUpdate){
            return;
        }

6、更新CoachesList.vue

async loadCoaches(refresh = false) {
    try {
        this.isLoading = true;
        await this.$store.dispatch('coaches/loadCoaches', {forceRefresh: refresh});
        this.isLoading = false;
    } catch (error) {
        this.error = error.message || 'Something went wrong!';
    }
},

7、Refresh每次点击都刷新

<base-button mode="outline" @click="loadCoaches(true)">Refresh</base-button>