Get data from API before app init Hello everyone! I need to get data from the API before my application is initialized. But what is "before app init"? Where is it? created() in App.vue, router.js, main.js or somewhere else? Thank you for any suggestions.
This is explained in the Vuejs documentation
https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
On your main VueJS instance you need to put your code to query the api in one of the events below e.g.
var vm = new Vue({
el: '#app',
data: {
message: 'Hello World!'
},
beforeCreate: function() {
alert("beforeCreate");
},
created: function() {
alert("created");
},
beforeMount: function() {
alert("beforeMount");
},
mounted: function() {
alert("mounted");
},
beforeUpdate: function() {
alert("beforeUpdate");
},
updated: function() {
alert("updated");
},
beforeDestroy: function() {
alert("beforeDestroy");
},
destroyed: function() {
alert("destroyed");
}
});
Which exact event will really depend you exact needs but likely to be beforeCreate or beforeMount
@D9705996 , thank you for the answer! Could you please tell me, from what event may I work with Vuex? Will it be available on beforeCreate()?
I would perform your api lookup as early as possible and dispatch an action to query your backend
beforeCreate: function() {
this.$store.dispatch("init");
}
In your store
actions: {
increment (context) {
axios.post('/init').then(response => {
this.$store.commit("initcomplete", response.data.data)
}
}
}
Bear in mind you action is async so you will some v-ifor similar to prevent your application trying go start until your data is ready.
If you have issues just try the next event down I the list in my original post until you find one that works for your needs
Please sign in or create an account to participate in this conversation.