Estoy tratando de usar axios en mi aplicación Vue3 para consumir API. Este es el script de mi componente:
export default { name: "Step2", data() { return { loading: true; }; }, mounted() { this.loading = false; }, methods: { makeRequest() { console.log('Making request...') this.axios.get('https://jsonplaceholder.typicode.com/users').then((response) => { console.log("test"); }); } } };Importé axios así:
import axios from 'axios' import VueAxios from 'vue-axios' ... const app = createApp(App) app.use(VueAxios, axios)Cuando presiono el botón para realizar la solicitud, siempre me sale el siguiente error:
Uncaught TypeError: can't convert undefined to object mergeConfig axios.js:1308 request axios.js:1431 method axios.js:1521 wrap axios.js:7 makeRequest Step2.vue:77 0 Step2.vue:28 ...Intenté usar diferentes navegadores pero no tuve suerte. Agradezco cada sugerencia.
¿Necesita VueAxios? Básicamente, todo lo que necesita hacer es en su principal:
import axios from 'axios' app.config.globalProperties.axios = axios;Y luego está disponible en los componentes a nivel mundial:
methods: { makeRequest() { console.log('Making request...') this.axios.get('https://jsonplaceholder.typicode.com/users') .then((response) => { console.log("test"); });No tiene que agregar axios globalmente a su aplicación, también puede agregarlo solo a los componentes que lo usan:
import axios from 'axios' export default { name: "Step2", data() { return { loading: true; }; }, mounted() { this.loading = false; }, methods: { makeRequest() { console.log('Making request...') axios.get('https://jsonplaceholder.typicode.com/users').then((response) => { console.log("test"); }); } } };