title: Using one vuex module store in multiple sibling components
body: <p>I have one global state with some modules.</p>
  
  <p>now i have vue components for various parts of my page.</p>
  
  <p>i have everything setup so <code>/foo</code> uses the <code>foo</code> store (this works).
  the <code>created</code> method loads data from an API and writes it to the store</p>
  
  <p>now i have <code>/foo/bar</code> as another (sibling) component, but it needs to access the same store as <code>/foo</code>, but i can't get it to work.</p>
  
  <p>if i enter <code>/foo/bar/</code> in the URL, there is nothing in the store.
  but if i switch to <code>/foo</code>, and then back to <code>/foo/bar</code>, the data is in the store and being output correctly</p>
  
  <p>I've tried registering <code>/foo/bar</code> as a child, which seemed to have no effect (and actually it's not really a child, but just another page with the same data..)</p>
  
  <p>I also tried </p>
  
  <pre><code>state: {
      ...mapState([
          'foo'
      )]
  }
  </code></pre>
  
  <p>in <code>/foo/bar</code>, but that doesn't seem to be the right way either</p>
  
  <p>what is the best practice to </p>
  
  <ol>
  <li>load data from API on <code>created</code> on any of a specified set of pages</li>
  <li>access said data on any of those pages (i.e. sharing the same store)</li>
  </ol>
  
  <p>i've tried all day to find a solution, but it seems I didn't understand something.</p>
  
  <p>thanks for your help :)</p>
  
  <h2>EDIT</h2>
  
  <p>actually, while i read my question again, i think my whole problem is the data not being loaded (because the <code>created</code> method is not called). how can i make sure this happens on any page using the store and just once? i can't just write an api call in every <code>created</code> method, can i?</p>