如何将@nuxtjs/axios与@nuxtjs/composition-api和nuxt 2一起使用

6ie5vjzr  于 2023-08-04  发布在  iOS
关注(0)|答案(1)|浏览(133)

我想在nuxt 2.17和插件https://composition-api.nuxtjs.org/(@nuxtjs/composition-api)中使用https://www.npmjs.com/package/@nuxtjs/axios
当然,这个.$axios的用法是不起作用的。我想我可能会以某种方式注射它,但到目前为止还没有成功。
我看到这个解决方案:https://stackoverflow.com/a/73237334/1121268,但使用Vue的getCurrentInstance似乎有点笨拙。
感谢您提供任何关于如何在合成API中使用$axios的提示。

siotufzp

siotufzp1#

你可以使用Nuxt Composition-API的useContext来实现。我已经添加了一个简单的工作代码和下面的链接。
要使用组合API useContext访问Nuxt的上下文,如@nuxtjs/composition-api文档中所述,您需要导入useContext
例如import { useContext } from '@nuxtjs/composition-api'
通过这种方式,您可以访问所有Nuxt上下文,在这种情况下,您也可以访问$axios模块。

import { ref, defineComponent, useContext } from "@nuxtjs/composition-api";

export default defineComponent({
  setup() {
    const todo = ref([]);
    const fetching = ref(false);
    const { $axios } = useContext();

    const fetchPosts = async () => {
      try {
        fetching.value = true;
        const response = await $axios.get(
          "https://jsonplaceholder.typicode.com/todos/1"
        );
        todo.value = response.data;
      } catch (error) {
        // Handle the error here
        console.error("Error fetching todo:", error);
      } finally {
        fetching.value = false;
      }
    };

    return {
      todo,
      fetchPosts,
      fetching,
    };
  },
});
<div>
    <h1>TODOs</h1>
    <button @click="fetchPosts">Fecth Tasks</button>

    <p v-if="fetching">Fetching...</p>
    <pre v-else>
      {{ JSON.stringify(todo, null, 3) }}
    </pre>
  </div>

`
这里是链接到codesandbox -https://codesandbox.io/s/nuxt-2-composition-api-and-axios-integration-pmzxq8

相关问题