vue3 异步数据

解决方案

在Vue 3中处理异步数据，通常会用到组合式API中的setup函数、ref或reactive来定义响应式数据，并结合async/await来处理异步请求。当组件挂载时，通过生命周期钩子（如onMounted）触发异步操作，获取数据并更新界面。

使用组合式 API 和 Axios 获取异步数据

这里以从服务器获取用户列表为例，需要安装axios：
npm install axios
然后创建一个名为UserList.vue的组件：
```vue

{{ user.name }}

import { ref, onMounted } from 'vue'
import axios from 'axios'

const loading = ref(true)
const users = ref([])

onMounted(async () => {
try {
const response = await axios.get('/api/users')
users.value = response.data
} catch (error) {
console.error(error)
} finally {
loading.value = false
}
})

``上述代码中，我们定义了两个ref类型的变量：loading和users。loading用于控制加载状态，users存储从服务器获取的数据。在组件挂载后，使用async/await发起异步请求，成功获取数据后赋值给users，最后将loading设置为false`，从而实现异步数据的展示。

使用Vuex管理异步数据

如果应用中有多个组件需要共享异步数据，可以考虑使用Vuex进行状态管理。
先安装vuex：
npm install vuex@next
创建store文件夹下的index.js：
```javascript
import { createStore } from 'vuex'
import axios from 'axios'

export default createStore({
state: {
users: []
},
mutations: {
setUsers(state, users) {
state.users = users
}
},
actions: {
async fetchUsers({ commit }) {
try {
const response = await axios.get('/api/users')
commit('setUsers', response.data)
} catch (error) {
console.error(error)
}
}
}
})
在`main.js`中引入并使用store：javascript
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'