Getting data from independent child component to other components with router

Question

I'm fairly new to Vue, which is why I can't ignore my feeling that I'm doing something wrong.

I have an independent component inside a view component, which has to emit data to other components.

The project has the following components: App, Navbar, Home, Statistics, Table and Search.

The Search component is used inside the Home component. It contains an <input> to let the user input his account name.

The Table component is used inside the Statistics component. It shows a table based on the input from the Search component.

+-- App
|   +-- Navbar
|   +-- Home
|   +-- ---- Search
|   +-- Statistics
|   +-- ---- Table

My main App.vue contains the router-view:

<template>
<div id="app">

  <Navbar></Navbar>

  <div class="container">
    <router-view></router-view>
  </div>

</div>
</template>

Two of them are main view components, which have a fixed route: Home & Statistics. The routes (router.js) are the following:

export default new Router({
  routes: [{
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/statistics',
      name: 'statistics',
      component: Statistics
    }
  ]
})

The Navbar component contains the router-links to the view components:

<template>
  <div id="navbar">
    <nav>
      <ul>
        <li class="active"><router-link to="/">Home</router-link></li>
        <li><router-link to="/statistics">Statistics</router-link></li>
      </ul>
    </nav>
  </div>
</template>

Now: What is the right way to get the data from the independent child component Search to my other independent child component Table?

The logical way would be Search-> Home -> App -> Statistics -> Table.

I already tried to use an event bus with $emit and $on, but it seems like the data can't connect to each other with the router inbetween.

Right now, I have a const in my main.js to store this global user data:

export const store = new Vue({
  data: {
    username: ''
  }
})

which I import everywhere I need it, but I highly doubt that this is the right way to do it.

I also thought about using props for my Table component, but I would need to pass my data from App to Statistics to Table which would work, but feels like a lot of boilerplate. Also: I need to get the username to the App before I can do that anyways, which is what I don't know how to do proberly.

Thanks in advance.

Hey are you able to make an minimal reproducible example e.g. with plnkr.co, jsfiddle.net, etc.? — Sᴀᴍ Onᴇᴌᴀ
Hey I see you have an accepted answer here... did you still need the cross-posted question on CR? — Sᴀᴍ Onᴇᴌᴀ
@AndrewElliott I created the question on CR before the answer was posted here. Why do you ask? — Bennett Dams
Just curious if the accept answer also answers the question on CR... if not, could you add more details to that post, like the markup and VueJS for all components mentioned? — Sᴀᴍ Onᴇᴌᴀ

Matt Matt · Accepted Answer · 2018-05-15T12:44:34

It's OK to use a global store as you are doing, the docs even have a guide on how to do so: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

If you want a more structured way of doing this, look into Vuex, which is also written by the Vue team: https://vuex.vuejs.org/

Vuex integrates nicely into the Vue devtools and sidesteps the import/passing problems you're describing (because it is a plugin injected via Vue.use, then $store is available in every Vue)

Getting data from independent child component to other components with router

1 Answers