trigger method in parent from child nested in router in Quasar (vue)

Question

I got this structure with nested routes in my router using Quasar framework (vue 3):

const routes = [
  {
    path: "/",
    component: () => import("layouts/myLayout.vue"),
    children: [
      {
        path: "",
        component: () => import("pages/Main.vue"),
        children: [
          {
            path: "",
            component: () => import("components/Sub.vue")
          }
        ]
      }
    ]
  }

I know I can use $emit in my child to pass to parent like this:

MyChild:

  this.$emit("myEvent", "hello world");

MyParent:

<MyChild @myEvent="updateMyEvent" />

However I want to trigger an event in parent without rendering MyChild once again in the parent since it is already displayed through the router ... So I am looking for a way of accessing the parents method more directly so to speak.

What is the correct implementation of doing this in vue 3?

UPDATE:

my method in child for updating vuex:

  this.updateValue(JSON.parse(JSON.stringify(myValue)));

Store.js

vuex:
const state = {
  value: 0
};

const actions = {
  updateValue({ commit }, payload) {
    commit("updateMyValue", payload);
  },

const mutations = {
  updateMyValue(state, payload) {
    state.myValue = payload;
  },
};

const getters = {
  getValue: state => {
    return state.value;
  },

I actually ended up with a watcher on my getter in my parent:

  computed: {
    ...mapGetters("store", ["getValue"]) // module and name of the getter
  },
  watch: {
    getValue(val) {
      console.log("MY VALUE: " , val);
    }

I recommend to use event bus https://stackoverflow.com/a/64019074/8172857 — Boussadjra Brahim, Jun 11 '21 at 10:00
I might mixing the concepts but is not possible going through vuex? trigger a method when the state is changed? — acroscene, Jun 11 '21 at 10:16
Yes that's the perfect way, it's better than using event bus, please share that state — Boussadjra Brahim, Jun 11 '21 at 10:20

score 1 · Accepted Answer · answered Jun 11 '21 at 10:44

1

In the child parent component define a computed property called stateValue that's based on the store state value and then watch it to trigger that event :

computed:{
   stateValue(){
     return this.$store.state.value;
   }
},
watch:{
    stateValue(val){
     this.updateMyEvent()// trigger the method
   }
}

answered Jun 11 '21 at 10:44

Boussadjra Brahim

82,684
19
144
164

1

I actually ended up with a watcher on my getter in my parent watching the getter in vuex, see my update above – acroscene Jun 11 '21 at 11:17

trigger method in parent from child nested in router in Quasar (vue)

1 Answers1