首页 前端知识 Vue 3 Pinia 实现网页刷新功能

Vue 3 Pinia 实现网页刷新功能

2024-08-27 09:08:45 前端知识 前端哥 180 595 我要收藏

概述

在现代 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. 导入依赖

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17042.html
标签
评论
发布的文章

jQuery 小技巧教程

2024-09-08 02:09:07

jQuery HashChange 插件指南

2024-09-08 02:09:07

jQuery-HAML 使用教程

2024-09-08 02:09:06

初识Jquery

2024-05-10 08:05:00

jQuery PJAX 使用教程

2024-09-08 02:09:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!