十一、vue3+ts项目框架搭建——点击刷新实现页面刷新——组件重加载

小曲曲

已于 2024-02-28 09:55:26 修改

阅读量664

点赞数 7

分类专栏：框架搭建 vue3.0 文章标签：前端 javascript vue.js

于 2024-02-18 09:54:49 首次发布

本文链接：https://blog.csdn.net/weixin_43848576/article/details/136146082

版权

vue3.0 同时被 2 个专栏收录

28 篇文章 3 订阅

订阅专栏

框架搭建

15 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用Pinia状态管理库实现组件的刷新功能。通过watch和nextTick，监听`refresh`状态的变化，控制组件的重建，以实现实时内容更新。

摘要由CSDN通过智能技术生成

实现思路

点击刷新，将内容区域组件重新加载即可
1. 在pinia中定义刷新状态refresh为 false
2. 点击刷新按钮将状态修改refresh为 !refresh
3. 在内容区组件 router-view 处 watch 监听 refresh 变化就将组件销毁重建
4. 内容区组件使用 v-if 绑定flag 值默认为true，当监听到点击刷新就使flag先变成false，在nextTick之后再变为true，即实现了组件的重新加载

<script setup lang="ts">
import { watch, ref, nextTick } from 'vue'
//使用layout的小仓库
import useLayOutSettingStore from '@/store/modules/setting'
let layOutSettingStore = useLayOutSettingStore()
//控制当前组件是否销毁重建
let flag = ref(true)
//监听仓库内部的数据是否发生变化，如果发生变化，说明用户点击过刷新按钮
watch(
  () => layOutSettingStore.refresh,
  () => {
    //点击刷新按钮：路由组件销毁
    flag.value = false
    nextTick(() => {
      flag.value = true
    })
  },
)
</script>