¡espero que estés bien! Estoy trabajando en un proyecto de aplicación web CRUD que maneja la gestión de usuarios. Crear usuario, editar usuario, eliminar usuario.
He instalado axis para que podamos enviar y recibir datos de nuestro backand. Así que ejecuté el comando npm install axios.
Pero después de eso, ¿cómo importé axios en el archivo main.js, pero no estoy seguro de si es la forma correcta? Gracias
import Vue from 'vue' import App from './App.vue' import router from './router' import { BootstrapVue, IconsPlugin } from "bootstrap-vue"; import axios from 'axios' //Import Bootstrap an BootstrapVue CSS files (order is important) import "bootstrap/dist/css/bootstrap.css"; import "bootstrap-vue/dist/bootstrap-vue.css"; // Make BootstrapVue available throughout your project Vue.use(BootstrapVue); Vue.use(IconsPlugin); Vue.config.productionTip = false Vue.use({ install (Vue) { Vue.prototype.$api = axios.create({ baseURL: 'http://localhost:8000/users/' }) } }) new Vue({ router, render: h => h(App) }).$mount('#app')<script> import axios from 'axios'; export default { data() { return { posts: [], errors: [] } }, // Fetches posts when the component is created. created() { axios.get(`http://jsonplaceholder.typicode.com/posts`) .then(response => { // JSON responses are automatically parsed. this.posts = response.data }) .catch(e => { this.errors.push(e) }) } } </script>Haga lo mismo que se muestra en el ejemplo de secuencia de comandos, funcionará
La obtención de datos de fuentes externas se considera un "efecto secundario". Por lo tanto, según yo, debe realizar tales efectos secundarios dentro de un ciclo de vida "montado".
Además, para mejorar las cosas, puede crear una capa de abstracción para obtener datos de API externas dentro del ciclo de vida "montado".
Para simplificar las cosas por su parte, también puede considerar Vue-Query.
la forma más fácil es crear una carpeta conocida como axios en su src, luego agregar index.js y luego poner este código:
// axios/index.js import axios from "axios"; export default axios.create({ baseURL: "http://127.0.0.1:8000/api/", //your base url here });luego importe este archivo como axios en su aplicación main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import { BootstrapVue, IconsPlugin } from "bootstrap-vue"; import axios from "@/axios"; //import your custom axios