Gracias por leer mi pregunta.
Estoy tratando de obtener la nueva sintaxis de <script setup> con Vue.js 3.2 y axios en ejecución. Con la sintaxis normal, mi código se parece a:
<script> import axios from 'axios' export default { name: 'GetRequest', data () { return { infos: null } }, mounted () { axios .get('https://api.predic8.de/shop/products/') .then(response => (this.infos = response.data)) } } </script> <template> <div id="app"> {{ infos }} </div> </template> Esto funciona bien, pero uso una plantilla ( https://github.com/justboil/admin-one-vue-tailwind ) para mi proyecto que funciona con la nueva <script setup> .
Ya encontré algunas soluciones como:
<script setup> import {onMounted} from "vue"; const {ref} = require("vue"); const axios = require("axios"); const info = ref([]) onMounted(async () => { await axios .get('https://api.predic8.de/shop/products/') .then(response => { this.info = response.data }) }) </script> <template> <div id="app"> {{ infos }} </div> </template> pero me da 'this.infos' se le asigna un valor pero nunca se usa . ¿Alguien sabe cómo puedo asignar el valor a la variable y llamarlo en la <template> ?
Encontré la solución usando infos.value en lugar de this.infos
<script setup> import {onMounted} from "vue" const {ref} = require("vue") const axios = require("axios") const infos = ref([]) onMounted(async () => { await axios .get('https://api.predic8.de/shop/products/') .then(response => { infos.value = response.data }) }) </script> <template> <div id="app"> {{ infos }} </div> </template> ```Es mejor usar inject para importar axios en cada componente. De esta manera, también puede crear algunos interceptores si es necesario...
Primero debe instalar el complemento axios para vue.js
> npm install --save axios vue-axios
Cuando finalice la instalación, simplemente importe los axios como se muestra a continuación:
import { createApp } from "vue"; import axios from "./plugins/axios"; import VueAxios from "vue-axios"; const app = createApp(App); // Axios Plugin app.use(VueAxios, axios); app.provide("axios", app.config.globalProperties.axios); import { inject } from "vue"; const axios = inject('axios'); // using axios as usual Nota: Usé <script setup> dentro del ejemplo del componente.
PD: puede crear una instancia de axios dentro del archivo ./plugins/axios.js si necesita usar interceptors ; de lo contrario, simplemente importe el axios como siempre dentro del archivo main.js
Cualquier variable declarada en el script de nivel superior sería accesible desde la plantilla.
Más información aquí https://v3.vuejs.org/api/sfc-script-setup.htm y aquí https://v3.vuejs.org/guide/composition-api-setup.html