Vue3でデータ変更時にリクエストを自動発行する方法

1 つの方法は、Vue 3 で提供される watchEffect 関数を使用することです。この関数は、関数である 1 つのパラメーターを受け取ります。この関数には、応答する必要がある変数が含まれています。これらの変数が変更されると、watchEffect 関数がこの関数を自動的にトリガーします。例:

import { watchEffect } from 'vue'

watchEffect(() => {
  // 需要响应的变量
  console.log('变量发生变化了')
})

上の例では、watchEffect 関数を使用して変数を観察しています。変数が変化すると、コンソールに「変数が変化しました。」と出力されます。

次に、watchEffect 関数で Ajax リクエストを送信できます。

import { watchEffect } from 'vue'
import axios from 'axios'

watchEffect(() => {
  // 需要响应的变量
  axios.get('/api/data')
    .then(response => {
      // 处理响应的数据
    })
})

上の例では、応答変数が変更されると、watchEffect 関数のコードが自動的に実行され、Ajax リクエストが送信されます。応答データを要求して処理します。

watchEffect 関数に加えて、Vue 3 は watch 関数も提供します。 watch 関数は 2 つのパラメータを受け取ります。最初のパラメータは監視する必要がある変数で、2 番目のパラメータは変数が変化したときに実行する必要があるコールバック関数です。例:

import { watch } from 'vue'
import axios from 'axios'

watch(
  // 监听的变量
  () => data.value,
  // 变量发生变化时执行的回调函数
  (newValue, oldValue) => {
    axios.get('/api/data')
      .then(response => {
        // 处理响应的数据
      })
  }
)

上記の例では、data.value 変数が変更されると、監視関数は自動的にコールバック関数を実行し、Ajax リクエストを送信し、応答データを処理します。

以上がVue3でデータ変更時にリクエストを自動発行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。