所以我有一个Vue组件,它有两个功能。一个附加一些数据并用该数据填充各种标签,另一个从json文件获取数据并通过它解析 - 将其应用到另一个函数。
(伪代码!)
mounted: function() {
function listBuilder(data) { some code }
$.get("some-json"), function (data) {
[some code...]
listBuilder(data);
}
}
在页面本身上,此组件存在两次。
<section>
<my-component type="map"></my-component>
</section>
<aside>
<my-component></my-component>
</aside>
一个组件以地图形式呈现数据,而另一个组件将其呈现为列表。这一切都很好用&amp;花花公子,除了在地图上数据呈现2倍 - 因为,正如您可能已经猜到的那样,组件的逻辑运行两次 - 获取json两次并处理两次。
是否有一种原生的“Vue”方式来让(或指定)组件中的代码只在页面上运行一次?我有一个相当(在我看来),通过将属性应用于其中一个组件(“哑”)的hacky方法来避免这种情况,这实际上是通过检查该属性是否存在来跳过一些逻辑。我觉得必须有一种更优雅和原生的方式来处理这个问题,但是在我的谷歌搜索中已经变干了。
答案 0 :(得分:1)
我确定你会得到不同的回复,但我不得不同意@pinoyyid并建议将http部分提取到服务中以便启动,然后我会实现Vuex(集中的本地数据可以相当容易与Vue集成,然后使用Vuex动作和getter来获取和处理数据。这将完全将您的vue组件与提取和数据处理分开。您只需获取一次数据,然后根据需要多次使用。最后但并非最不重要的是,与现在不同的是,测试是可能的。
答案 1 :(得分:1)
一种可能的方法是将组件数据加载移动到另一个父元素。其他方法是使用一个全局存储(如vuex
),然后从中加载数据。这只是vuex
正在解决的问题类型。如果您不想使用vuex
,只需使用浏览器Window.sessionStorage
即well supported,您就可以将所需的所有数据存储在其中。它是基于会话的,因此您不必每次都加载信息。