最近在用keep-alive配合vuex做快取處理。發現在某些場景下，keep-alive設定的include不會立即生效，但是include的值確實已經改變。
  具體的原因如下。在router.beforeEach中dispatch關於keep-alive的action，在action中根據路由對state中的include動態增刪。然後在相應的頁面元件中mapState獲取該include。我發現路由的跳轉優先於mapState獲取include，導致快取不會立即生效。由此可見mapState獲取值應該是非同步的。
  解決辦法，在action中使用promise包裝，在router.beforeEach使用await或者.then實現同步，保證include修改完成並mapState到元件中，再進行路由的跳轉。

const actions = {
  changeKeepAlive({ commit }, { to, from }) {
    return new Promise((resolve, reject) => {
      if (!to.path.includes('/home/menu')) { // 不是首頁, 清空keepalive
        commit('CLEAR_INCLUDE');
        resolve();
      } else {
        let fromIsInKeepAlive = state.include.includes(from
 
.name);
        if (to.meta.index < from.meta.index && fromIsInKeepAlive) {  // 後退時,若當前頁被快取,移除快取配置
          commit('DELETE_INCLUDE', from.name);
          resolve();
        }
        if (to.meta.index > from.meta.index && !fromIsInKeepAlive) {  // 前進時,下一頁需要快取,新增該頁面
          commit('ADD_INCLUDE', from.name);
          resolve();
        }
      }
      resolve();
    });
  }
};

store.dispatch('keepAlive/changeKeepAlive', {to, from}).then(() => {
    ...
})

ude需要在路由跳轉前修改。