How to change the data in the store?

Question

Vue.js

Hello
, I have a store (there are many) for different blocks on different pages of the site
, the store stores information depending on the parameter, in my case of a city,

for example, on the main page I have a list of popular products (/store/popular.js)
on the same me a list of reviews (/store/reviews.js)
...
...
all this data is tied to the city that the person chose on the site
and, accordingly, in the site header, there is a button to change the city of

the pages on the site a lot almost everywhere its own store

question
the person went to the main page - pressed the change of city
How can I correctly "push an event" so that all the stores that are currently in use, those that are on the current page, take new information from the newly installed city?

the choice of the city is in my component (modal window) and it is called in the template (layouts)

the problem is that if the client clicks the city change on the main page - I replace the store with my hands right now (they cause mutations with the new city parameter, which is also in the store stored) and I call in turn all the stores that are used on the main one,

and if the client is on the "blog" page, then I need to somehow understand which store is currently used in the view and replace not "reviews" or "popular", but only the store with a blog
but how can I understand this (what to update and what can not be updated)? what algorithm?

I have a bunch of pages, everywhere my store and components, and you can change the city (change the index store) on any page, and after changing it, the content on the page (current) should change, and when you go to others, there are no problems anymore, since fetch is already looking for with a new city_id it doesn’t find it and loads it (but how to understand which page is now, which stores it is using and how to update them?)

Answer 1

made through the eventBus the
city change component generates a global event in this. $ nuxt
in all components hung a listener
that is hung when created (and the actions of the active store are called inside)
when it is destroyed
it works as I need - only the necessary store changes instantly
events - movieton
and code repetition in components (attaching and removing listens to events)