index.html
<script defer src='main.js'></script>
<script defer src='extension.js'></script>
<div id='main-app'></div>
<div id='extension'></div>
main.js
const store = new Vuex.Store({
state:{
greeting:'hello'
}
})
const mainApp = new.Vue({
el:'#main-app',
store
})
extension.js
const extension = new.Vue({
mounted(){
console.log('How can I access the greeting in the store?')
}
})
I aim to utilize Vuex to fetch data from Vue instances imported from diverse files. This approach is necessary as each page has distinct plugins that load dynamically.
However, accessing app's state using rootState appears challenging due to different roots. Is there a workaround to retrieve the data like leveraging windows, mixins, or other global objects or methods?