vue3 请求赋值

Vue3 请求赋值

开头解决方案

在Vue3项目中，实现请求赋值通常涉及到使用axios库发起HTTP请求，并将响应数据绑定到组件的响应式数据属性上。核心思路是利用Vue3的组合式API（Composition API），通过setup函数来定义响应式状态和生命周期钩子。我们可以通过多种方式来实现请求赋值，下面将几种常见且实用的方法。

方法一：使用async/await与setup函数

这是最推荐的方式之一，代码结构清晰易读：

vue

  <div>加载中...</div>
  <div>
    <ul>
      <li>{{ item.name }}</li>
    </ul>
  </div>
</p>


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

// 定义响应式变量
const loading = ref(true)
const items = ref([])

// 定义获取数据的方法
const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data')
    items.value = response.data
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 在组件挂载时调用
onMounted(() => {
  fetchData()
})


<p>

方法二：使用watch监听路由变化自动请求

当页面有参数变化或者需要根据路由变化动态加载不同数据时，可以结合watch来实现：

vue</p>


import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const loading = ref(true)
const items = ref([])

const fetchData = async () => {
  // 根据route.params或query来调整请求参数
  const response = await axios.get(`https://api.example.com/data/${route.params.id}`)
  items.value = response.data
  loading.value = false
}

// 监听路由变化
watch(route, fetchData)

// 初始化请求
fetchData()


<p>

方法三：使用Vuex管理全局状态

对于复杂应用，特别是需要跨多个组件共享数据的情况，建议使用Vuex来集中管理状态：

安装并配置Vuex
在store中定义actions和mutations
组件内通过mapActions映射action

javascript
// store/index.js
import { createStore } from 'vuex'
import axios from 'axios'</p>

<p>export default createStore({
  state: {
    items: []
  },
  mutations: {
    SET<em>ITEMS(state, payload) {
      state.items = payload
    }
  },
  actions: {
    async fetchItems({ commit }) {
      const response = await axios.get('https://api.example.com/data')
      commit('SET</em>ITEMS', response.data)
    }
  }
})

vue

  <ul>
    <li>{{ item.name }}</li>
  </ul>
</p>


import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

// 获取 Vuex 中的状态
const items = computed(() => store.state.items)

// 调用 action 加载数据
store.dispatch('fetchItems')


<p>

以上三种方法都能很好地解决Vue3中的请求赋值问题，具体选择哪种取决于项目的实际需求和复杂度。无论是简单的单个组件请求，还是复杂的全局状态管理，Vue3都提供了灵活而强大的工具来帮助开发者完成任务。