概述
在现代 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>
-
导入依赖:
- 导入
watch
,ref
, 和nextTick
函数,这些是 Vue 3 的 Composition API 中的核心函数。 - 导入
useLayOutSettingStore
,这是来自@/store/modules/setting
的 Pinia 存储模块。
- 导入
-
创建响应式引用:
let flag = ref(true);
创建一个响应式的布尔值flag
,初始值为true
。
-
监听数据变化:
- 使用
watch
函数监听layoutSettingStore.refresh
的变化。 - 当
refresh
发生变化时,先将flag
设置为false
,这会导致<component>
被隐藏,从而触发组件的销毁。 - 使用
nextTick
确保 DOM 更新后,再将flag
设置回true
,从而重新显示组件。
- 使用
6. 测试
启动应用并测试刷新功能:
npm run serve
打开浏览器,访问 http://localhost:8080
,点击“刷新”按钮,查看页面是否正确刷新。
结论
通过使用 Vue 3 和 Pinia,我们可以轻松地实现网页的局部刷新功能。这种方法不仅可以提高用户体验,还可以使应用程序更加灵活和高效。