vue实现联动get
Vue 实现联动 GET 请求
在 Vue 中实现联动 GET 请求通常涉及父子组件通信、状态管理或直接调用 API。以下是几种常见方法：
使用 props 和事件监听
父组件通过 props 传递数据给子组件，子组件通过事件触发父组件的请求方法。
父组件代码示例：
<template>
<ChildComponent :data="parentData" @update="fetchData" />
</template>
<script>
export default {
data() {
return {
parentData: null
}
},
methods: {
async fetchData(params) {
const response = await axios.get('/api/data', { params })
this.parentData = response.data
}
}
}
</script>子组件代码示例：
<template>
<button @click="handleClick">更新数据</button>
</template>
<script>
export default {
props: ['data'],
methods: {
handleClick() {
this.$emit('update', { id: 123 })
}
}
}
</script>使用 Vuex 状态管理
当组件层级较深时，Vuex 可以更高效地管理共享状态和异步请求。
store 模块示例：
const actions = {
async fetchData({ commit }, params) {
const response = await axios.get('/api/data', { params })
commit('SET_DATA', response.data)
}
}组件中调用：
methods: {
updateData() {
this.$store.dispatch('fetchData', { id: this.selectedId })
}
}使用组合式 API (Vue 3)
Vue 3 的组合式 API 提供了更灵活的代码组织方式。
示例代码：
import { ref } from 'vue'
import axios from 'axios'
export function useDataFetcher() {
const data = ref(null)
const error = ref(null)
const fetchData = async (params) => {
try {
const response = await axios.get('/api/data', { params })
data.value = response.data
} catch (err) {
error.value = err
}
}
return { data, error, fetchData }
}在组件中使用：
import { useDataFetcher } from './composables/useDataFetcher'
export default {
setup() {
const { data, fetchData } = useDataFetcher()
return {
data,
handleUpdate: (params) => fetchData(params)
}
}
}使用 watch 监听变化
当需要根据某些值的变化自动触发请求时，可以使用 watch。
示例代码：
watch: {
selectedId(newVal) {
this.fetchData({ id: newVal })
}
}使用 computed 属性
对于需要基于其他数据计算的请求参数，可以使用 computed 属性。
示例代码：
computed: {
requestParams() {
return {
page: this.currentPage,
size: this.pageSize
}
}
},
watch: {
requestParams: {
handler(newVal) {
this.fetchData(newVal)
},
immediate: true
}
}
