VUE3 处理异步请求数据 shallowReactive

VUE3 处理异步请求数据 shallowReactive

vue3官网 shallowReactive 说明

[(响应性基础 API | Vue.js (vuejs.org))]

示例

<script setup>
import {shallowReactive} from 'vue'
import Axios from 'axios'

const data = shallowReactive({})
Axios.get($url, {params:$params}).then(resp=>data.id=resp.data.id)
</script>

<template>
    <div>{{ data.id }}</div>
</template>

说明：

1. $url , $params 为请求时的地址和参数。

2. const data = shallowReactive({}) : 通过 shallowReactive 创建一个响应式的代理，可以跟踪其自身 property 的响应性。

3. 通过 axios 请求，在 then 中处理后端返回数据，将后端返回的数据赋值给 data 的自身属性。例 data.id=resp.data.id

   如果需要整个响应对象全部赋值，可使用 Object.assign(target, source)

   示例：Object.assign(data, resp.data)

4. <div>{{ data.id }}</div> 中的 data.id 动态响应