Why is data from vuex not showing up?

Question

Vue.js

In actions there is a request to the database. On the page I want, I call it in the mounted hook.
The action runs without errors and the data is written to the storage, which can be seen in the devtools.
All data is also correctly displayed if it was previously loaded.
However, the problem is this: if the page is completely updated, then the data does not have time to be substituted . I tried to call the action in different hooks, but the situation does not change.

Answer 1

You need to block page refresh (render stage) until all modules and/or data are fully loaded using one of the traditional methods.

Answer 2

In the data of the component or the state of the store, enter some field for the status (by default, "not ready"). As long as the status is "not ready", show the placeholder or spinner. Set either the watcher in the component to the value in the store, or the watcher to the mutation, or ... . In general, when the data in vuex changes, change your status to "ready".
Update: If you use some solutions like vue-ssr, nuxt, uvue, etc., in general, where there are asynchronous methods (asyncData), then you can return a Promise in such methods, and until it "resolves " Rendering will not occur.