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，我们可以轻松地实现网页的局部刷新功能。这种方法不仅可以提高用户体验，还可以使应用程序更加灵活和高效。