As I work on my Vue.js project, I've successfully implemented a plugin for Axios following the guidelines provided here. This allows Axios to be utilized globally within the project. The key snippets of code in my project are as follows:
in src/plugins/axios.js -
import axios from 'axios';
export default {
install: function(Vue) {
Object.defineProperty(Vue.prototype, '$axios', { value: axios });
}
}
in src/main.js -
import axios from './plugins/axios';
Vue.use(axios);
new Vue({
render: h => h(App),
created() {
console.log(this.$axios ? 'axios plugin works' : 'axios plugin does not work');
}
}).$mount('#app');
When checking the console, the message "axios plugin works" confirms that everything is functioning correctly up to this point.
Within a file that utilizes Axios, there are hardcoded URLs present. Here's an excerpt showcasing a method from the file:
src/forms/official-scenarios.vue -
export default {
data() {
return {
errors: [],
officialScenarios: []
}
},
methods: {
getOfficialScenarios() {
this.$axios
.get('https://localhost/myapp/api/scenariolog')
.then(response => {
this.officialScenarios = response.data;
})
.catch(error => {
this.errors.push(error);
});
}
},
mounted: function () {
this.getOfficialScenarios();
},
}
I'm interested in establishing a global base URL for https://localhost/myapp/api and referencing it in all methods utilizing this.$axios. How can this base URL be defined? And what would the implementation look like in official-scenarios.vue?