How to properly initialize Vuex store on app startup using rest API?

Question

I want to initialize the store with some data that is fetched from API (I'm using axios) How can I do this on app startup, only once?

I have a store.js file that exports my store and a main.js file that does this:

import Vue from "nativescript-vue";
import store from "./store";

new Vue({
  store,
  render: (h) => h("frame", [h(App)]),
}).$start();

Answer 1

Try using .dispatch() with your Axios REST API grabbing function in the created() hook in the main Vue component (the one you included store in):

new Vue({
  store,
  render: (h) => h("frame", [h(App)]),
  created() {
    this.$store.dispatch('myAxiosFetchFunction');
  },
}).$start();