Comment définir l'actualisation de la page dans Uniapp

Lors du développement d'applications uniapp, nous rencontrons souvent des situations où la page doit être actualisée. Par exemple, la page doit être restituée après la mise à jour des données. Par conséquent, comment configurer l’actualisation des pages dans l’application uniapp est devenue une question très importante.

Cet article présentera plusieurs méthodes courantes de configuration de l'actualisation des pages dans uniapp pour aider les développeurs à mieux gérer ce problème.

1. Utilisation du cycle de vie de vue

Dans vue, la fonction de cycle de vie du composant fournit une série de méthodes pour écouter les événements du cycle de vie du composant, notamment beforeCreate, create , beforeMount , monté, beforeUpdate, mis à jour, beforeDestroy et détruit, etc.

Parmi elles, les fonctions de cycle de vie montées et mises à jour sont très adaptées au rafraîchissement des pages. La fonction de cycle de vie montée est appelée immédiatement après le montage du composant, tandis que la fonction de cycle de vie mise à jour est appelée immédiatement après la mise à jour du composant. Par conséquent, nous pouvons utiliser ces deux fonctions pour surveiller les modifications de page et restituer la page.

La méthode d'implémentation spécifique est la suivante :

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      // 发送请求获取数据
      const res = await this.$http.get('/api/data')
      // 将数据保存到data中
      this.data = res.data
      // 调用$nextTick方法以便更新完成后再进行操作
      this.$nextTick(() => {
        // 进行页面刷新
        window.location.reload()
      })
    }
  }
}
</script>

Dans cet exemple, nous envoyons une requête pour obtenir des données dans la fonction montée, puis utilisons la méthode $nextTick pour garantir que la mise à jour des données est terminée avant de continuer. La page s'actualise. La méthode window.location.reload est utilisée ici pour actualiser la page.

2. Utilisez l'API fournie par uniapp

En plus d'utiliser la fonction de cycle de vie de vue pour actualiser la page, uniapp fournit également des API pour permettre aux développeurs d'actualiser la page.

1. Actualisation des pages en changeant d'itinéraire

uniapp fournit une méthode uni.reLaunch qui peut être utilisée pour fermer toutes les pages et en ouvrir une nouvelle . Grâce à cette méthode, nous pouvons actualiser la page.

La méthode d'implémentation spécifique est la suivante :

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    }
  },
  async getData() {    
    // 发送请求获取数据
    const res = await this.$http.get('/api/data')
    // 将数据保存到data中
    this.data = res.data
    // 调用uni.reLaunch方法进行页面刷新
    uni.reLaunch({
      url: '/pages/xxx/xxx'
    })
  }
}
</script>

Dans cet exemple, nous actualisons la page en appelant la méthode uni.reLaunch. Il est à noter que lors de l’appel de cette méthode, vous devez transmettre le chemin de la page nouvellement ouverte.

2. Utilisez le bus d'événements pour implémenter l'actualisation de la page

uniapp fournit également un bus d'événements EventBus, qui peut être utilisé pour gérer uniformément la communication entre les composants. Grâce au modèle de publication-abonnement, nous pouvons réaliser des mises à jour en temps réel de la page.

La méthode spécifique d'implémentation est la suivante :

• Créez un nouveau fichier EventBus.js dans le répertoire commun :

import Vue from 'vue'
export default new Vue()

# 🎜🎜## 🎜🎜#Dans le composant qui doit actualiser la page, écoutez l'événement :

• import EventBus from '@/common/EventBus.js'
  
  export default {
    data() {
      return {
        data: []
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      async getData() {
        const res = await this.$http.get('/api/data')
        this.data = res.data
        // 触发事件，通知其他订阅者进行更新
        EventBus.$emit('data-change')
      }
    }
  }

Dans le composant qui doit mettre à jour les données, abonnez-vous à l'événement :

• import EventBus from '@/common/EventBus.js'
  
  export default {
    data() {
      return {
        data: []
      }
    },
    mounted() {
      // 订阅事件
      EventBus.$on('data-change', () => {
        this.getData()
      })
    },
    methods: {
      async getData() {
        const res = await this.$http.get('/api/data')
        this.data = res.data
      }
    }
  }

Dans cet exemple, nous utilisons EventBus pour écouter et nous abonner, et une fois la mise à jour des données terminée, nous déclenchons des événements pour informer les autres abonnés de mettre à jour. De cette manière, l'effet de rafraîchissement de la page en temps réel peut être obtenu.

Pour résumer, uniapp propose diverses façons d'actualiser la page. Les développeurs peuvent choisir la méthode la plus appropriée pour le développement d'applications en fonction d'exigences spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!