re-request the server after data change

[amoss]

Hi

I have a layout -> page (changes between different pages) structure.

Each page calls the server for data. The server does all the logic and calculations and send back the data to the client. Something like this:

created() {
        this.startEverything();
},

and (this part is different in each page)

startEverything() {
    this.getDataFromServer1();
    this.getDataFromServer2();
    this.getDataFromServer3();
}

In the layout I have a button where I can add data. The new data means new logic and calculations so basically I need to reload the current visible page for the server calls to be processed again. Alternatively, I can execute all the calls from created -> starteverything().

How can this be done? Assuming I have startEverything on each page, can I tell the layout to execute this specific method on the page it’s holding? Or maybe there is a better/cleaner way?

Thanks

[jraez]

Imho, you should use Vuex. Move the starteverything() to a vuex action, store the result and use vuex getters reactivity in your layout/components. If you need to refresh data, just call the action again and bubble down the data to the store state. Reactivity and getters will do the magic then.

[amoss]

I admit that this is beyond my understanding level of quasar/vue. startEverything calls different methods in each page so not sure how making it “global” can work.

Maybe I can use “emit” of “start-everything” and in each page I can set $on for that event to call startEverything method of itself? I thought of that just now so I wonder if only the current page will “catch” and whether there’s a better/cleaner way to do it.

[amoss]

emit works as expected. If this is a hack and there’s a better/cleaner way to achieve this, let me know.
Thanks

[rab]

Perhaps you already know Vue persists data across page refreshes. It’s not clear you need it here.

I would store the data fetched within startEverything into a data variable (say myData) and call an updateMyData method when the new data is entered.

Depending on your UI the updateMyData could be triggered by a button (see @click)

You do not need to refresh / reload page to re-trigger the data fetch from the server.

[amoss]

@rab
The emit solution does not reload the page, it simply calls (again) the methods that use axios calls that refresh the data in the client.

in page:

mounted() {
        this.$root.$on('set-start-everything',this.startEverything);
    },

in methods

startEverything(includeTotals) {
                 if (includeTotals)
                     this.getData1();
                this.getData2();
                this.getData3();
            }
        }

and in layout (parent), when the data is updated

this.$root.$emit('set-start-everything', true );

[rab]

The emit solution does not reload the page

Yes this is what I expected. My comment was not clear.

I assume the getData methods act on the new data (or the context is somehow different as otherwise would not need to be called again).

If it is working for you then the solution seems ok to me.