如何在一个Vue组件中每页仅运行一次代码（当同一页面中存在多个相同组件时）？

Question

So I have a Vue component which has two functions. One attaches some data and populates various tags with that data, another gets the data from a json file and parses through it - applying it to the other function.

(pseudo-code ahead!)

mounted: function() {
  function listBuilder(data) { some code }
  $.get("some-json"), function (data) {
    [some code...]
    listBuilder(data);
  }
}

On the page itself, this component exists twice.

<section>
  <my-component type="map"></my-component>
</section>
<aside>  
  <my-component></my-component>
</aside>

One component renders out the data in map form, while the other renders it out as a list. This all works just fine & dandy, except that on the map the data is rendered 2x - because, as you might have guessed, the component's logic is run twice - getting the json twice and processing it twice.

Is there a native "Vue" way to have (or designate) the code in the component to only run once on a page? I have a rather (in my opinion), hacky way of avoiding this right now, by applying a property to one of the components ("dumb"), that essentially skips some of the logic via a check if that property exists. I feel there has got to be a more elegant and native way to handle this, however, but have come up dry in my google searches.

Answer 1

Well I'm sure you'll get different responses, but I would have to agree with @pinoyyid and suggest extracting http part into a service for start, and then I would implement Vuex ( centralized local data that can be fairly easily integrated with Vue ) and then use Vuex actions and getters to get and process data. This will completely separate your vue component from fetching and data processing. You will only fetch your data once and then use it as many times as you'd like. And last but not least testing will be possible unlike now.

Answer 2

One possible way is to have the component data loading moved to another parent element. Other way of doing this is to have one global store (like vuex ) and then load the data out of it. This is just the type of problem vuex is solving. If you don't want to use vuex just use the browser's Window.sessionStorage it is well supported and you can store all the data you need in it. It is session based so you won't need to load the information every time.