首页 > 解决方案 > Nuxt/axios 模块设置在方法中不起作用

问题描述

我正在尝试在 nuxt.js 中使用 axios 进行 api 调用,问题是当我在 asyncData 中使用 axios 时,我在 nuxt.config.js 中的所有 axios 设置都可以正常工作,但是当我尝试在自定义方法中使用 axios 时我点击按钮点击所有配置都是默认的。有没有办法在方法中使用它们?

nuxt.config.js

....

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
  ],

  axios: {
    baseURL: process.env.API_URL || 'http://localhost:8000/api/', // Used as fallback if no runtime config is provided
    https: false,
    credentials: true,
    proxy: true,
  },

  proxy: {
    '/laravel': {
      target: 'https://laravel-auth.nuxtjs.app',
      pathRewrite: { '^/laravel': '/' }
    }
  },
  auth: {
    strategies: {
      'laravelSanctum': {
        provider: 'laravel/sanctum',
        url: process.env.BASE_URL,
        endpoints: {
          login: {
            url: '/api/login'
          },
          user: {
            url: '/api/user'
          },
        }
      },
    }
  },

index.js

 ....

 <script>
    import Logo from '~/components/Logo.vue'
    import VuetifyLogo from '~/components/VuetifyLogo.vue'
    
    export default {
      components: {
        Logo,
        VuetifyLogo
      },
    
      data() {
        return {
          filesPath: process.env.filesPath,
          apiUrl: process.env.apiUrl,
          user: undefined,
        }
      },
    
      async asyncData({params, $axios}) {
        const experiences = await $axios.$get(`/experiences/it`)
        return {experiences}
      },
    
      methods: {
        login() {
          this.$auth.loginWith('laravelSanctum', {
            data: {
              email: 'prova2@mail.it',
              password: 'prova2123'
            }
          })
        },
        async getUser() {
          const user = await this.$axios.$get('/user')
          this.user = user
        },
      }
    }
    </script>

标签: vue.jsaxiosnuxt.js

解决方案


推荐阅读