Vue 3 + Pinia 实现网页刷新功能

概述

在现代 Web 开发中，保持用户界面的动态性和响应性至关重要。当用户触发某些操作时，例如点击按钮或者完成表单提交，我们往往需要刷新页面的一部分来展示最新的数据。本文将介绍如何使用 Vue 3 和 Pinia 来实现这一功能。

技术栈

• Vue 3
• Pinia (状态管理)

目标

实现一个简单的网页刷新功能，当用户点击刷新按钮时，页面中的某个部分会重新加载以展示最新数据。

步骤

1. 创建项目

假设你已经安装了 Node.js 和 Vue CLI，可以使用 Vue CLI 创建一个新的 Vue 3 项目：

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

2. 安装依赖

安装 Pinia 和 Vue Router，因为我们会使用 Pinia 来管理状态，并使用 Vue Router 来处理页面的导航。

3. 配置 Pinia

创建一个 Pinia 的状态管理仓库来管理布局组件的配置，比如是否显示刷新效果。

具体代码如下：

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

这里添加了一个 toggleRefresh action 来切换 refresh 的状态。

4. 设置 顶部刷新组件

现在我们需要在组件中使用这个仓库，并且添加一个按钮来触发刷新。

具体代码

<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>

这里我们添加了一个 beforeEach 路由守卫来检查是否需要刷新当前路由。

5. 刷新的主页面

这段代码定义了一个 Vue 3 组件，该组件主要用于处理路由组件的过渡效果，并且具备一个刷新功能，用 v-if 来销毁路由组件的入口。

<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>

1. 导入依赖：

   • 导入 watch, ref, 和 nextTick 函数，这些是 Vue 3 的 Composition API 中的核心函数。
   • 导入 useLayOutSettingStore，这是来自 @/store/modules/setting 的 Pinia 存储模块。

2. 创建响应式引用：

   • let flag = ref(true); 创建一个响应式的布尔值 flag，初始值为 true。

3. 监听数据变化：

   • 使用 watch 函数监听 layoutSettingStore.refresh 的变化。
   • 当 refresh 发生变化时，先将 flag 设置为 false，这会导致 <component> 被隐藏，从而触发组件的销毁。
   • 使用 nextTick 确保 DOM 更新后，再将 flag 设置回 true，从而重新显示组件。

6. 测试

启动应用并测试刷新功能：

npm run serve

打开浏览器，访问 http://localhost:8080，点击“刷新”按钮，查看页面是否正确刷新。

结论

通过使用 Vue 3 和 Pinia，我们可以轻松地实现网页的局部刷新功能。这种方法不仅可以提高用户体验，还可以使应用程序更加灵活和高效。