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();

Zaroth · Accepted Answer · 2019-07-29T09:02:19.803

4

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();

edited Jul 29 '19 at 09:02

answered Jul 29 '19 at 08:06

Zaroth

created hook on which component? I want it to be run only once for the whole app. – yukashima huksay Jul 29 '19 at 08:06
1

In the main component, in the component where you put `new Vuex.Store(store)`. – Ali Jul 29 '19 at 08:09
Well, I don't know the component layout of your app, but the master/parent component sounds like the right choice, since you're probably gonna have only one copy of it... – Zaroth Jul 29 '19 at 08:09
1

@Ali that is not a component. That is store.js file... oooh you mean the main.js file in the Vue instance – yukashima huksay Jul 29 '19 at 08:14
@Zaroth can you update your answer based on my edit? – yukashima huksay Jul 29 '19 at 08:27
I just did. Hope it helps. – Zaroth Jul 29 '19 at 09:05
@Zaroth why not store instead of this.$store? – yukashima huksay Jul 29 '19 at 09:37
`this.$store` is a standard way to referring to vuex store object once it has been included in the root component - see [vuex documentation](https://vuex.vuejs.org/guide/state.html) – Zaroth Jul 29 '19 at 09:40

1 Answers1