uniappでページ更新を設定する方法

uniapp アプリケーションを開発する場合、データの更新後にページを再レンダリングする必要があるなど、ページを更新する必要がある状況に遭遇することがよくあります。したがって、uniapp アプリケーションでページ更新をどのように設定するかが非常に重要な問題になります。

この記事では、開発者がこの問題にうまく対処できるように、uniapp でページの更新を設定する一般的な方法をいくつか紹介します。

1. vue のライフ サイクルの使用

vue では、コンポーネントのライフ サイクル関数は、beforeCreate、created、beforeMount、mounted、beforeUpdate、などのコンポーネントのライフ サイクル イベントを監視する一連のメソッドを提供します。 updated、beforeDestroy と破棄など。

その中でも、マウントおよび更新されるライフサイクル関数は、ページの更新に非常に適しています。マウントされたライフサイクル関数はコンポーネントがマウントされた直後に呼び出され、更新されたライフサイクル関数はコンポーネントが更新された直後に呼び出されます。したがって、これら 2 つの関数を使用して、ページの変更を監視し、ページを再レンダリングできます。

具体的な実装方法は次のとおりです:

<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>

この例では、マウントされた関数でデータを取得するリクエストを送信し、$nextTick メソッドを使用してページが確実に取得されるようにします。データの更新が完了すると更新されます。ここでは、ページを更新するために window.location.reload メソッドが使用されています。

2. uniapp が提供する API を使用する

vue のライフサイクル関数を使用してページを更新することに加えて、uniapp は開発者がページを更新しやすくするための API も提供します。

1. ルートの切り替えによるページの更新

uniapp には、すべてのページを閉じて新しいページを開くために使用できる uni.reLaunch メソッドが用意されています。このメソッドを通じて、ページを更新できます。

具体的な実装方法は次のとおりです。

<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>

この例では、uni.reLaunch メソッドを呼び出してページを更新します。このメソッドを呼び出すときは、新しく開いたページのパスを渡す必要があることに注意してください。

2. イベント バスを使用してページ更新を実装する

uniapp は、コンポーネント間の通信を均一に管理するために使用できる EventBus イベント バスも提供します。パブリッシュ/サブスクライブ モデルを通じて、ページのリアルタイム更新を実現できます。

具体的な実装方法は次のとおりです。

• 共通ディレクトリに新しい EventBus.js ファイルを作成します。ページを更新する必要があるコンポーネントで、イベントをリッスンします:

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

• データを更新する必要があるコンポーネントで、イベントをサブスクライブします:

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')
    }
  }
}

この中でたとえば、EventBus のリッスンとサブスクライブを操作し、データの更新が完了した後にイベントをトリガーして他のサブスクライバーに更新を通知します。このようにして、リアルタイムでページを更新する効果が得られます。
• 要約すると、uniapp ではページを更新するためのさまざまな方法が提供されており、開発者は特定の要件に応じてアプリケーション開発に最適な方法を選択できます。

以上がuniappでページ更新を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。