0

I am working on a Vue JS project and want to ask a conceptual scenario based Question . So I have 3 modules in the Project.

Module A Module B Module C

Each Module has a separate Store . There is one object called Record in each of these Modules. Although each Module in separately maintaining this object (Record) but on the backend (webApi and Services) its a same entity .

Now there is another Module (Module 4) which basically allow user to view and update that object (Record) . And that module in opening in a new window ( i am using vue router- target_blank command to open module object in new tab)

My question is that when the user interacts with that object (Record) in module 4 and change some of its properties , i want other modules to reflect these changes . Currently i need to refresh to update the changes on (Module A, Module B, Module C) .

How can I achieve this ? System is designed to open module 4 in new window and I don't want to change that .

It's Siddiqi
  • 79
  • 1
  • 6
  • it makes little sense to duplicate and track the same object across so many different modules. you should track Record in a single module and other modules can still access/update Record as needed without tracking Record themselves. All that's needed is to have [modules access the state of other modules](https://stackoverflow.com/questions/41366388/vuex-access-state-from-another-module). Say an update is made in Module 4, Module 4 can access and make direct updates to the states of the other modules if a change needs to be reflected across all modules at the same time. – yoduh Sep 06 '22 at 15:37
  • You need to either sync multiple app instances through backend (websocket), or use interwindow communication. It depends on your case how this should be done. As for Vuex, there's vuex-broadcast plugin that uses BroadcastChannel to sync a store across windows, could be useful if it works – Estus Flask Sep 06 '22 at 15:38
  • @yoduh will it still work if new instance of app is created , because i am opening module in new tab . Inside Module 4 Action script const actions = { async getRecord(context, payload) { console.log( context.rootState); // This gave me states of all other modules i have but somehow record in undefined in rootState Modules . console.log( context.rootState.ModuleA.record) ; //undefined } Couldnot figure why ? New Instance maybe – It's Siddiqi Sep 08 '22 at 02:22
  • And Seconldy how to commit mutation for rootState . Currently for current context async getRecord(context, payload){ result= getDataFromApi; context.commit("setRecord" , result.data); } All stores have setRecord Mutation , how to achieve this using rootStates. – It's Siddiqi Sep 08 '22 at 02:35

0 Answers0