Vue3 Composition API中setup与事件调用异步composable问题

你的代码点击后视图不更新，核心是两个逻辑错误：

• 作用域隔离问题：你在handleClick函数内部重新调用getData时，解构出的data是函数作用域内的全新局部ref，和setup最外层返回给模板绑定的data是完全独立的两个响应式变量。哪怕新请求成功，更新的也只是这个内部的局部变量，模板感知不到变化。
• Composable设计缺陷：你当前的getData把endpoint作为初始化参数传入，返回的load方法固定绑定初始化时的地址，不支持动态切换请求目标，就算复用第一次返回的load，也只会请求endpoint1。

第一步：调整getData composable逻辑 #

把endpoint参数移到load方法上，保证composable只初始化一次，就能复用同一套响应式状态发起不同地址的请求：

import {ref} from 'vue'
const getData = () => {
    const data = ref([])
    const error = ref(null)
    // load方法接收动态传入的endpoint参数
    const load = async(endpoint) => {
      error.value = null
      try{
        if (!endpoint) throw Error('请求地址不能为空')
        const response = await fetch(`BASE_URL${endpoint}`)
        if (!response.ok) throw Error('数据拉取失败')
        data.value = await response.json()
      }
      catch (err){
        error.value = err.message
      }
    }
    return{data, error, load}
}
export default getData

第二步：调整组件调用逻辑 #

setup中只调用一次composable拿到响应式引用，初始化和点击事件都复用同一套方法和状态：

<template>
    <div>
      <button @click="handleClick">click me</button>
      <div v-if="error" class="error">{{ error }}</div>
    </div>
    <div>{{data}}</div>
</template>

<script>
import getData from '../composables/getData'

export default {
  name: 'HomeView',
  setup(){
    // 仅初始化一次composable，拿到当前setup作用域内唯一的响应式引用
    const {data, error, load} = getData()
    // 首次加载endpoint1数据
    load('endpoint1')

    const handleClick = () => {
      // 点击时复用同一个load方法，传入新地址，更新的是模板绑定的同一个data ref
      load('endpoint2')
    }
    return {data, error, handleClick}
  },
}
</script>

Vue组合式API的响应式触发，依赖同一个ref对象的引用。如果你在不同作用域重复调用composable创建新的ref，哪怕变量名完全一样，也是相互独立的不同对象，模板绑定的ref和你更新的ref不是同一个，自然不会触发视图更新。

内容的提问来源于stack exchange，提问作者fun3s