灏天阁

vue3.2/Vite/Ts32: 刷新业务的实现

· Yin灏

原理：刷新的时候将二级路由组件销毁并进行重建。

定义刷新行为的全局变量

  • src / store / modules / setting.ts
import { defineStore } from 'vue';

let useLayOutSettingStore = defineStore('SettingStore', {
    state: () => {
        return {
            refresh: false; // 定义是否刷新
        }
    }
})

export default useLayOutSettingStore;

处理刷新按钮的点击业务

  • src / layout / tabbar / setting / index.vue
<template>
  <!-- ... -->
  <el-button
    size="small"
    icon="Refresh"
    circle
    @click="updateRefresh"
  ></el-button>
  <!-- .... -->
</template>

<script setup lang="ts">
  import useLayOutSettingStore from "@/store/modules/setting";
  let layoutSettingStore = useLayOutSettingStore();

  const updateRefresh = () => {
    layoutSettingStore.refresh = !layoutSettingStore.refresh;
  };
</script>

监听全局数据 refresh 的改变

  • src / layout / main / index.vue
<template>
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" v-if="flag" />
    </transition>
  </router-view>
</template>
<script setup lang="ts">
  //...
  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 可以获取更新后的 dom
      // 模板更新完成之后
      nextTick(() => {
        flag.value = true;
      });
    }
  );
</script>

- Book Lists -