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

Question

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

我在 Vue2 中使用此堆栈经常使用的一种做法是有 1 个返回 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,
        }
    }
}

我想使用函数，所以我可以重新使用它进行过滤等。

非常想知道其他人是如何做到这一点的。 我一直在谷歌上搜索了一下，但似乎找不到相关的文档。

非常欢迎所有反馈。

Answer 1

我现在用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 中所做的。