SoFunction
Updated on 2025-04-12

Use Vue3 and Pinia to achieve web page refresh function

Overview

In modern web development, it is crucial to keep the user interface dynamic and responsive. When a user triggers certain actions, such as clicking a button or completing a form submission, we often need to refresh a part of the page to display the latest data. This article will explain how to use Vue 3 and Pinia to achieve this functionality.

Technology stack

  • Vue 3
  • Pinia (Status Management)

Target

Implement a simple web page refresh function, when the user clicks the refresh button, a part of the page will be reloaded to show the latest data.

step

1. Create a project

Assuming you have installed the Vue CLI, you can use the Vue CLI to create a new Vue 3 project:

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

2. Installation dependencies

Install Pinia and Vue Router because we use Pinia to manage state and Vue Router to handle page navigation.

3. Configure Pinia

Create a Pinia's state management repository to manage layout components configurations, such as whether refresh effects are displayed.

The specific code is as follows:

import { defineStore } from 'pinia'
 
const useLayoutSettingStore = defineStore('SettingStore', {
    state: () => {
        return {
            fold: false, // Whether to collapse the sidebar            refresh: false // Refresh effect        }
    },
    actions: {
        toggleRefresh() {
             = !;
        }
    }
})
 
export default useLayoutSettingStore;

Added one heretoggleRefreshaction to switchrefreshState of  .

4. Settings Top Refresh Components

Now we need to use this repository in the component and add a button to trigger the refresh.

Specific code

<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/" 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>Log out</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
 
<script setup lang="ts" name="setting">
// Get the configurationimport useLayOutSettingStore from '@/store/modules/setting';
let layoutSettingStore = useLayOutSettingStore();
 
// Refresh button click eventconst updateRefresh = () => {
     = !;
}
</script>
 
<style scoped></style>

Here we have added onebeforeEach The route guard checks whether the current route needs to be refreshed.

5. Refresh the main page

This code defines a Vue 3 component, which is mainly used to handle the transition effects of routing components, and has a refresh function. v-if To destroy the entry of the routing component.

<template>
    <!-- Routing component exit location -->
    <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();
 
// Control whether the current component is destroyed and rebuiltlet flag = ref(true);
 
// Listen to whether the data inside the warehouse has changed. If it changes in reverse, it means that the user has clicked the refresh buttonwatch(() => , () => {
    // Click the refresh button: The routing component needs to be destroyed     = false;
    nextTick(() => {
         = 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. Import dependencies：

    • Importwatch, ref, andnextTick Functions, these are the core functions in Vue 3's Composition API.
    • ImportuseLayOutSettingStore, this is from@/store/modules/setting Pinia storage module.

  2. Create responsive references：

    • let flag = ref(true);Create a responsive boolean valueflag, the initial value istrue。

  3. Listen to data changes：

    • usewatchFunction monitoringlayoutSettingStore.refresh Changes.
    • whenrefresh When changes occur, firstflag Set tofalse, this will cause<component> is hidden, triggering the destruction of the component.
    • usenextTick Make sure that the DOM is updated and thenflag Set backtrue, thereby redisplaying the component.

6. Test

Launch the app and test the refresh function:

npm run serve

Open the browser and visithttp://localhost:8080, click the "Refresh" button to see if the page is refreshed correctly.

in conclusion

By using Vue 3 and Pinia, we can easily implement partial refreshing of web pages. This approach not only improves the user experience, but also makes the application more flexible and efficient.

The above is the detailed content of using Vue3 and Pinia to realize the web page refresh function. For more information about Vue3 Pinia web page refresh, please follow my other related articles!