[Vuejs]-Vue js sharing data through Bus is not working

by

0👍

✅

Hello as explained by MU , this is how I solved it .

I installed VueX

npm install vuex –save

then in my app.js page which is the parent instance

import Vuex from 'vuex';

Vue.use(Vuex);
 const store = new Vuex.Store({
  state: {
    cards_search_query: 'ss'
  }
});

Then in my search page

methods : {

          onSubmit(){

              let str = "distributor="+this.form.distributor+"&supplierId="+this.form.supplier;

              let baseUrl = 'wfengine/price_filter_gas_1/';

              this.$store.state.cards_search_query = baseUrl+'?'+str;
              //Here I am updating Vikram
              this.$router.push('/results/');

          }
        }

And in My Result page 

mounted() {
        console.log('Component mounted :: Results');
        console.log(this.$store.state.cards_search_query);
    },

Please Pay attention to 

this.$store.state.cards_search_query = baseUrl+'?'+str;

Although using Vuex could be overKill for a simple task like this one .

👤Vikram Anand Bhushan

2👍

Possible reason based on the information provided is that other component is just not in the DOM when event is emitted, so it does not react for the event.

In this case, I would suggest to use route with parameter, so the first component would trigger the route +str or something like that and the second component would get the parameter from the route.

Other way, but in my opinion is not good in this case, is to use Vuex and store query in Vuex, so first component would commit the query to Vuex and second would get it from Vuex. However, I would suggest first solution.

If you have some data which you need to share between components but really don’t want to expose it (but remember, on frontend side everything is more or less exposed, it’s just matter of effort needed to get it) you could theoretically use LocalStorage as alternative solution to route parameter/Vuex.

Another solution (so many of them) is to solve your routes this way, that you would have some parent component e.g. SEARCH-PARENT with <router-view> and 2 nested routes with your components SEARCH-DIALOG & SEARCH-RESULTS. Dialog would emit the event as it’s now, parent would react and then pass it to Results when route is changed.
Maybe this way?

👤Marek Urbanowicz

Leave a comment