基本上,我希望能够通过将 dataBus 设置为 vue 实例对象来访问一些集中式数据,然后从不同的组件访问和调整这些数据。
我似乎无法通过我的组件中的数据进行访问,即使是基本的字符串插值也没有呈现给 DOM。
export const dataBus = new Vue({
data: {
numQuotes: 4,
stringVar: 'Hellow There'
}
});
我还尝试将我的数据设置为函数 data() 的返回值。但是因为我的数据总线是一个实际的 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”未在实例上定义,但在渲染期间被引用。确保在数据选项中声明响应式数据属性。
我是否遗漏了一些明显的东西?甚至可以通过这种方式访问数据吗?或者我必须将它作为一种方法来访问吗?
最佳答案
您缺少将 data
分配给组件的部分。尝试
<script>
import { dataBus } from '../main.js';
export default{
data () {
return dataBus.$data
}
}
</script>
你绝对应该看看Vuex尽管用于状态管理。
关于javascript - 如何在 VueJS 中的 eventBus 上存储和访问数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45363347/