首页 > 解决方案 > 如何在 Vue3 Composition API 中使用 vue-axios?

问题描述

我正在使用expressNodeJS 来运行用于身份验证的 API 我正在使用以下包

const session = require('client-sessions');

app.use(session({
cookieName: 'session',
secret: process.env.COOKIE_SECRET,
duration: 30 * 60 * 1000 * 30,
activeDuration: 60 * 60 * 1000 * 30
}));

我正在使用我已经导入的快递axios,并VueAxios在我的main.js文件中使用以下代码:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/style.css'
import router from './router'
import axios from 'axios';
import VueAxios from 'vue-axios';

const app = createApp(App)
app.use(VueAxios, axios, router)
app.provide('axios', axios)
app.provide('VueAxios', VueAxios)
app.mount('#app')

这是我的组件 Javascript 块中的代码

import { onBeforeMount, onMounted, ref, inject } from "vue";

setup() {

    const axios = inject('axios');
    const VueAxios = inject('VueAxios');

    onMounted(async ()=> {
         
        VueAxios.axios.get(...... // I get this error - Cannot read property 'get' of undefined

        VueAxios.get(...... // I get this error - VueAxios.get is not a function

                    
        axios.get(......  // this works, but how do I use VueAxios for passing session payload? 
    })


}

标签: expressaxiosvuejs3vue-composition-api

解决方案


app.provide('VueAxios', VueAxios)使其工作后添加以下代码行

 axios.defaults.withCredentials = true;

推荐阅读