1

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.

4

1 Answer 1

0

It's OK to use a global store as you are doing, the docs even have a guide on how to do so: https://v2.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)

4
  • Thanks for your answer. I'm afraid that vuex would add even more boilerplate, I thought there would be a much more simple way to share global data between independent components. May 15, 2018 at 12:50
  • @BennettDams if not using Vuex, then I would just export the store as its own module. That way, other modules aren't importing it from App, they are just importing the independent Store module. It is basically a Singleton pattern at that point
    – Matt
    May 15, 2018 at 12:54
  • When you talk about "modules", do you mean Vue components or Vuex modules? May 15, 2018 at 14:27
  • @BennettDams Vue components (as JS modules). I would make a Store at the root (peer with App). That way any component downstream can just import Store from '@/store'
    – Matt
    May 15, 2018 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.