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

Posted 2023-03-16

【中文标题】组合 API - setup() 中的 Axios 请求

【英文标题】：Composition API - Axios request in setup()

【发布时间】：2022-01-05 02:14:29

【问题描述】：

我正在 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,
        
    

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

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

非常欢迎所有反馈。

【参考方案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 中所做的。

【讨论】：

您介意分享一下您将如何使用 Vuex 做到这一点吗？由于我没有使用它的经验，我很想看到它的实际应用！

我可能会写一篇关于它的博客文章，但文档很好，而且非常简单。 vuex-orm.org 尤其是 vuex-orm.github.io/plugin-axios 。这是一个更大的块，因为您需要定义数据模型并设置 vuex-orm “数据库”。尝试阅读文档并玩弄，它真的不是那么可怕，但有很多东西要写，然后你大部分只是复制/粘贴。这样做的好处是，您有一个单一的事实来源，一旦您从服务器读取数据，您就不必再次读取它，如果您不需要的话。

@Guardian，因为您使用的是 Vue3，next.vuex.vuejs.org 用于 vuex。这也很简单，但我现在正忙着做某事，刚刚看到有关评论的通知。 vuex + vuex-orm + vuex-orm-plugin-axios 。我花了大约一天的时间才弄清楚。我最终会回到这个话题。

很公平，我要试一试！谢谢一百万！