vue3 keep-alive 动态缓存页面

keep-alive

通过keep-alive可以缓存页面,但是有的时候有这种需求:
从首页进入列表页要刷新
从详情页返回列表页不刷新

基本思路

通过vuex 保存需要缓存的列表页数组
通过keep-alive 的 include 来动态获取vuex保存的数组

代码实现

app.vue

<router-view v-slot="{ Component }">
    <!-- 缓存页面 -->
    <keep-alive :include="$store.state.keepLiveRoute">
      <component :is="Component" />
    </keep-alive>
  </router-view>

store->index.js

const keepLiveRoute = ["daily", "safe", "todo", "week", "work"];
export default createStore({
  state: {
    keepLiveRoute
  },
  mutations: {
    ClearKeep(state) {
      if (state.keepLiveRoute.length > 0) state.keepLiveRoute = [];
      console.log("清空缓存路由！");
    },
    SetKeep(state) {
      if (!state.keepLiveRoute.length > 0) state.keepLiveRoute = keepLiveRoute;
      console.log("设置缓存路由！");
    }
  },
  actions: {},
  modules: {}
});