使用Vue3和Pinia实现网页刷新功能

vue create my-refresh-app
cd my-refresh-app
npm install pinia @vue/router

import { defineStore } from 'pinia'
 
const useLayoutSettingStore = defineStore('SettingStore', {
    state: () => {
        return {
            fold: false, // 是否折叠侧边栏
            refresh: false // 刷新效果
        }
    },
    actions: {
        toggleRefresh() {
            this.refresh = !this.refresh;
        }
    }
})
 
export default useLayoutSettingStore;

<template>
    <el-button size="default" circle="false" @click="updateRefresh">
        <el-icon>
            <Refresh></Refresh>
        </el-icon>
    </el-button>
    <el-button size="default" circle="false">
        <el-icon>
            <FullScreen></FullScreen>
        </el-icon>
    </el-button>
    <el-button size="default" circle="false">
        <el-icon>
            <Setting></Setting>
        </el-icon>
    </el-button>
    <img src="@/../public/favicon.ico" style="margin: 0 12px">
    <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
            admin
            <el-icon class="el-icon--right">
                <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
 
<script setup lang="ts" name="setting">
// 获取一下 配置
import useLayOutSettingStore from '@/store/modules/setting';
let layoutSettingStore = useLayOutSettingStore();
 
// 刷新按钮点击事件
const updateRefresh = () => {
    layoutSettingStore.refresh = !layoutSettingStore.refresh;
}
</script>
 
<style scoped></style>

<template>
    <!-- 路由组件出口位置 -->
    <router-view v-slot="{ Component }">
        <transition name="fade">
            <component :is="Component" v-if="flag" />
        </transition>
    </router-view>
</template>
 
<script setup lang="ts" nam="main">
import { watch, ref, nextTick } from 'vue';
import useLayOutSettingStore from '@/store/modules/setting';
let layoutSettingStore = useLayOutSettingStore();
 
// 控制当前组件是否销毁重建
let flag = ref(true);
 
// 监听仓库内部的数据是否发生变化,如果反生变化，说明用户点击过刷新按钮
watch(() => layoutSettingStore.refresh, () => {
    // 点击刷新按钮: 路由组件需要销毁
    flag.value = false;
    nextTick(() => {
        flag.value = true;
    })
})
</script>
 
<style scoped>
.fade-enter-from {
    opacity: 0;
    transform: rotate(0deg)
}
 
.fade-enter-active {
    transition: all 1s;
}
 
.fade-enter-to {
    opacity: 1;
    transform: rotate(360deg);
}
</style>

npm run serve