如何在每个页面中仅在Vue组件中运行一次代码(当该页面上存在多个相同的组件时)?

时间:2017-02-14 00:41:14

标签: javascript vue-component vue.js

所以我有一个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方法来避免这种情况,这实际上是通过检查该属性是否存在来跳过一些逻辑。我觉得必须有一种更优雅和原生的方式来处理这个问题,但是在我的谷歌搜索中已经变干了。

2 个答案:

答案 0 :(得分:1)

我确定你会得到不同的回复,但我不得不同意@pinoyyid并建议将http部分提取到服务中以便启动,然后我会实现Vuex(集中的本地数据可以相当容易与Vue集成,然后使用Vuex动作和getter来获取和处理数据。这将完全将您的vue组件与提取和数据处理分开。您只需获取一次数据,然后根据需要多次使用。最后但并非最不重要的是,与现在不同的是,测试是可能的。

答案 1 :(得分:1)

一种可能的方法是将组件数据加载移动到另一个父元素。其他方法是使用一个全局存储(如vuex),然后从中加载数据。这只是vuex正在解决的问题类型。如果您不想使用vuex,只需使用浏览器Window.sessionStoragewell supported,您就可以将所需的所有数据存储在其中。它是基于会话的,因此您不必每次都加载信息。