How do multiple components share data gracefully with Vuex?

multiple page components (.vue files) are written by different developers on the team. A set of administrative partition data is used in these pages. This data needs to be obtained by calling the background API with Axios. This data is unchanged for the same user, and multiple page components should use the same data. The access order of these page components is not fixed.
so, my question is, which page is responsible for calling the value of axios and putting it in store? If each page has to be called, it must be unreasonable for the same data to be fetched many times. Does it mean that each page should first determine whether this value exists? if it does not exist, call actions and put it in store, and watch this value change, and then getter this value? Feel that this judgment logic is very troublesome, but also requires all pages to be written in this way, and it takes time to coordinate the code style. Can you encapsulate these judgment logic and call the page directly? How do you use it in practice?
the previous experience of using caching at the backend is to provide a tool class and method for calling. This method encapsulates the code for fetching data, first determines whether it exists in the cache, and returns if it does not exist. If it does not exist, it is put into the cache after it is obtained from the database, and then returned. The caller only needs to call this method, but this is not an asynchronous implementation. I wonder if vuex can be used in this way.

May.10,2021

if you have the same entry, put it in the outermost component App.vue .

< hr >

it still depends on your data. There is no fixed place to get, only choose the most suitable.
1, such as your administrative division data, this kind of static data, it is no problem to store localStorage directly.
2, such as getting user information data, it is suitable to be obtained by root components, because it may be used in many places.
3, for example, if several components share a set of data, you can unify these components under a parent component, and then just get the data from the parent component.


feels that it is possible to set the page routing that will be used for shared data into an array. Each time you enter the route, you can determine whether to jump to the page in this array. If so, try to get whether getter has a value, and then call action

if there is no value.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea8aae-46c37.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea8aae-46c37.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?