<template>
  <q-page class="container-height">
    <div class="fit overflow-auto">
      <router-view v-slot="{ Component, route }">
        <keep-alive :include="state.keepAliveList">
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </router-view>
    </div>
  </q-page>
</template>
<script lang="ts">
// v-if="route.meta && route.meta.keepalive"
// <component
//   v-if="!(route.meta && route.meta.keepalive)"
//   :is="Component"
// />
import { watch, reactive } from 'vue';
import { usePageStore } from 'src/common/hooks';
export default {
  name: 'LaoutIndexPage',
  setup() {
    const pageStore = usePageStore();
    // const keepAliveList = computed(() => {
    //   console.log('keepAliveList--', pageStore.allPageKeys);

    //   return pageStore.allPageKeys;
    // });
    const state = reactive({
      keepAliveList: [] as any[]
    })

    watch(
      () => pageStore.allPageKeys,
      (val) => {
        state.keepAliveList = val;
      },
      {
        immediate: true,
        deep: true,
      }
    )

    return {
      // keepAliveList,
      state,
    };
  },
};
</script>

<style scoped lang="scss"></style>
