代码之家 › 专栏 › 技术社区 › Guardian

组合API-setup()中的Axios请求

inertiajs vue-composition-api vuejs3

Guardian · 技术社区 · 3 年前

我正在Laravel/VueJS/InertiaJS堆栈中试用Vue3的Composition API。

我在Vue2中使用这个堆栈时经常使用的一种做法是,有一个路由返回Vue页面组件(例如Invoices.Vue),然后在 created() 回调时,我会触发对另一个端点的axios调用来获取实际数据。

我现在正在尝试在Vue3中复制类似的方法,使用类似的组合API

export default {
    components: {Loader, PageBase},
    props: {
        fetch_url: {
            required: true,
            type: String,
        }
    },
    setup(props) {
        const loading = ref(false)
        const state = reactive({
            invoices: getInvoices(),
            selectedInvoices: [],
        });

        async function getInvoices() {
            loading.value = true;
            return await axios.get(props.fetch_url).then(response => {
                return response.data.data;
            }).finally(() => {
                loading.value = false;
            })
        }

        function handleSelectionChange(selection) {
            state.selectedInvoices = selection;
        }

        return {
            loading,
            state,
            handleSelectionChange,
        }
    }
}

然而,这不断给我提供建议,而不是返回的实际数据。

这样改变确实有效:

export default {
    components: {Loader, PageBase},
    props: {
        fetch_url: {
            required: true,
            type: String,
        }
    },
    setup(props) {
        const loading = ref(false)
        const state = reactive({
            invoices: [],
            selectedInvoices: [],
        });

        axios.get(props.fetch_url).then(response => {
            state.invoices = response.data.data;
        }).finally(() => {
            loading.value = false;
        })

        function handleSelectionChange(selection) {
            state.selectedInvoices = selection;
        }

        return {
            loading,
            state,
            handleSelectionChange,
        }
    }
}

不过我想使用函数,这样我就可以重复使用它进行过滤等。

很好奇别人是怎么做的。我一直在谷歌上搜索,但似乎找不到相关的文档。

我们非常欢迎所有反馈。

0 回复 | 直到 3 年前

user17408941 user17408941 3 年前

我现在试过了 async setup() 和 await getInvoices() 和 <Suspense> 但它从未显示任何内容。

所以我就是这样做的,但我不会,我会使用vuex和vuex-orm来存储发票并从商店获取状态。

<template>
  <div>loading:{{ loading }}</div>
  <div>state:{{ state }}</div>
</template>

<script>
import {defineComponent, ref, reactive} from "vue";
import axios from "axios";

export default defineComponent({
  name: 'HelloWorld',
  props: {
    fetch_url: {
      required: true,
      type: String,
    }
  },
  setup(props) {
    const loading = ref(false)
    const state = reactive({
      invoices: []
    })

    async function getInvoices() {
      loading.value = true;
      await axios.get(props.fetch_url).then(response => {
        state.invoices = response.data;
      }).finally(() => {
        loading.value = false;
      })
    }

    return {
      getInvoices,
      loading,
      state,
    }
  },
  async created() {
    await this.getInvoices()
  }
})
</script>

<style scoped>
</style>

这当然与选项2中的操作类似。