如何在 VueJS 中的 eventBus 上存储和访问数据

Question

基本上我希望能够通过将 dataBus 设置为 vue 实例对象来访问一些集中式数据，然后从不同的组件访问和调整这些数据。

我似乎无法通过我的组件中的数据进行访问，即使是基本的字符串插值也没有呈现到 DOM。

  export const dataBus = new Vue({
    data: {
      numQuotes: 4,
      stringVar: 'Hellow There'
    }
  });

我还尝试将我的数据设置为函数 data() 的 return。但是因为我的数据总线是一个实际的 vue 实例，所以我认为这是不正确的。（我可能是错的）。以下是我导入数据总线并尝试输出数据的组件。

  <template>
    <div>
      <h1>Quotes Added</h1>
      <div id="trackerBar">
        <div id="trackerBarActual">
            <h2>{{numQuotes}}/10</h2>
        </div>
      </div>
    </div>

  </template>

  <script>
    import { dataBus } from '../main.js';

    export default{

    }
  </script>

我收到以下错误：属性或方法 "numQuotes" 未在实例上定义，但在渲染期间被引用。确保在数据选项中声明响应式数据属性。

我是不是遗漏了什么明显的东西？甚至可以通过这种方式访问数据吗？或者我必须将它作为一种方法来访问吗？

Answer 1

您遗漏了将 data 分配给组件的部分。尝试

<script>
import { dataBus } from '../main.js';

export default{
  data () {
    return dataBus.$data
  }
}
</script>

尽管如此，您绝对应该研究 Vuex 的状态管理。

如何在 VueJS 中的 eventBus 上存储和访问数据

How to store and access data on eventBus in VueJS

javascript

event-bus

vue.js