时间戳

首页 > 解决方案 > 如何从 Quasar V2 Composition API 设置功能访问引导文件配置的 axios？

vuejs3 - 如何从 Quasar V2 Composition API 设置功能访问引导文件配置的 axios？

问题描述

如何从 Quasar V2 Composition API 设置功能访问引导文件配置的 axios，而不在每个文件中导入 axios？

由于 this.$axios 只能用于 Options API，我尝试通过 setup 函数的 context 参数进行访问。

尽管它有效，但 context.root 现在在 Vue 3 中已被弃用。

我不想在每个文件中导入 axios，如https://next.quasar.dev/quasar-cli/ajax-requests中的示例所示

对于设置方法访问，我认为它仍然没有实现，因为在https://next.quasar.dev/quasar-cli/boot-files#examples-of-appropriate-usage-of-boot-files作为 TODO 活动提到

与 axios 类似，从引导文件中使用 vue-i18n 对我来说也是一个问题。

 setup (props, context) {
         
    context.root.$axios({
    method: 'get',
        url: 'http://localhost:8080/storemgr/item/3',
      }).then((response: any) => {
          console.log(response)
      }).catch((error: any) => {
        console.log(error)
      })
...
}

下面是我由 Quasar V2 CLI 生成的 axios 引导文件内容


import axios, { AxiosInstance } from 'axios'
import { boot } from 'quasar/wrappers'

declare module 'vue/types/vue' {
  interface Vue {
    $axios: AxiosInstance;
  }
}

export default boot(({ Vue }) => {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
  Vue.prototype.$axios = axios
})

标签： vuejs3quasar-frameworkvue-composition-api

解决方案

我发现的唯一其他方法是使用Provide/Inject。在我的引导文件中，我像这样使用它：

export default boot(({ app }) =>
{
  app.config.globalProperties.$axios = axios
  app.provide('axios', app.config.globalProperties.$axios)
})

在任何组件中：

 setup ()
      {
        const axios: AxiosInstance = inject('axios') as AxiosInstance
        [...]
      }

事后看来，我不太确定这是否比导入它更好。¯_(ツ)_/¯

推荐阅读