I am trying to figure out how to pass data from the Module variable in CoreMods.vue to ExternalWebpage.vue using Vuex. I want the CoreModule state to be watched for changes in the external webpage.
This is my store.js setup:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.store({
state:{
CoreModule: ""
},
mutations:{
update: (state, n) => {
state.CoreModule = n;
}
},
getters:{
updated: state =>{
return state.CoreModule;
}
},
actions:{
async createChange({ commit }, n) {
commit("update", n);
}
}
});
In CoreMods.vue:
methods:{
checkModule() {
if(!this.completed_cm.includes(this.Module)) {
if (this.core.includes(this.Module)) {
this.completed_cm.push(this.Module);
this.$store.dispatch('createChange',this.Module);
}
},
In ExternalWebpage.vue:
watch:{
'$store.state.CoreModule': function(){
var cm = this.$store.getters.updated;
if(this.CompletedCore.indexOf(cm) == -1){
this.CompletedCore.push(cm);
}
}
}
Unfortunately, I cannot use props by importing one component into another due to the structure of my components: 1) I do not want to nest the entire component within the parent component. 2) CoreMod is a component on the home page leading to ExternalWebpage upon navigation (implemented with router)
Currently, this code is not working as expected. Any help or alternative solutions would be greatly appreciated. Additionally, how should I integrate this piece of code into main.js? Thanks!!!