vue/vuex - confused about when to load state

Hi!

I have been learning Vue recently, and I love it. However, I have a nagging question.

I have all my data being called from the server via API calls (axios + Flask-RESTful).

I could load all my store modules with all the data from the server at once, and then filter it as needed in my views (one "big" API call). Or I could load only the filtered data as needed (multiple API calls, filling the stores with specific data each time).

What would you do?

My first reaction was to load from the server as needed in the views, but then I get trouble on reload when the data is not loading and I have to go back and forth in my router links to reload the store...

Any tips are appreciated!!
Greetings from Beijing
Daniel

Comments

[Dallas DeGrendel]

So it sounds like you are torn between two hack fixes. Loading everything always seems more viable when data is the bare minimum and served from the same computer. Unless you are building a PWA and that is essential data, this is a lazy move, and you learn nothing.
You said these queries are supposed to fire on page change. Are the staying on the same page, but the id is changed, or are you changing pages completely?
How are you triggering the query?

Are you reloading because you only query when the component is created...

created() {
    if (this.location) {
      this.$apollo.queries.locationById.skip = true;
    }

I just took a quick peek. Also, it might be better to use a getter to maintain your state.
Honestly, if you are new to vue and vuex, I would scaled down a bit. You will probably need help again, and that's page code length is going to be tough to jump into cold.

[Daniel da Rocha]

Thanks for the reply... it is a bit too late though ;)

I am now totally into GraphQL and Vue Apollo, where the queries are tightly coupled with the components which need them, and the Apollo Cache makes store and request control quite intuitive.