使用路由器从独立子组件获取数据到其他组件

Question

我对 Vue 还很陌生，这就是为什么我不能忽视我做错了什么的感觉。

我在视图组件中有一个独立的组件，它必须向其他组件发出数据。

该项目包含以下组件：App、Navbar、Home、Statistics、Table 和 Search。

Search 组件在Home 组件内部使用。它包含一个<input> 让用户输入他的帐户名称。

Table 组件在Statistics 组件内部使用。它显示了一个基于来自Search 组件的输入的表格。

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

我的主要App.vue 包含router-view：

<template>
<div id="app">

  <Navbar></Navbar>

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

</div>
</template>

其中两个是主视图组件，有固定的路由：Home & Statistics。 路线（router.js）如下：

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

Navbar 组件包含 router-links 到视图组件：

<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>

现在：将数据从独立子组件Search 获取到我的另一个独立子组件Table 的正确方法是什么？

逻辑方法是Search-> Home -> App -> Statistics -> Table。

我已经尝试使用带有$emit 和$on 的事件总线，但数据似乎无法通过中间的路由器相互连接。

现在，我的 main.js 中有一个 const 来存储这个全局用户数据：

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

我在需要它的任何地方都导入它，但我非常怀疑这是不是正确的方法。

我也考虑过为我的Table 组件使用道具，但我需要将我的数据从App 传递到Statistics 到Table，这可行，但感觉就像很多样板。另外：无论如何，我需要先将用户名设为App，然后才能这样做，这是我不知道该怎么做的。

提前致谢。

Answer 1

按照您的方式使用全局存储是可以的，文档甚至有关于如何使用的指南：https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

如果您想要一种更结构化的方式，请查看同样由 Vue 团队编写的 Vuex：https://vuex.vuejs.org/

Vuex 很好地集成到了 Vue 开发工具中，并回避了您所描述的导入/传递问题（因为它是通过 Vue.use 注入的插件，所以每个 Vue 都可以使用 $store）