title: Correct way to cache data in vuex
body: <p>I am trying to asynchronously load data into vuex that is static but is used by multiple routes.I only want to fetch the data once and only when a route that needs it is visited. This is what I'm currently doing but I'm not sure if this is the correct convention or if there is a better/more Vueish way.</p>
  
  <pre><code>// store.js
  
  export default new Vuex.Store({
    state: {
      _myData: null,
    },
    getters: {
      myData: (state) =&gt; new Promise((resolve,reject) =&gt; {
        if(state._myData){
          resolve(state._myData);
        } else {
          axios.get('http://myData.com/')
          .then(myData =&gt; {
            state._myData = myData;
            resolve(state._myData);
          });
        }
      })
    }
  });
  
  // ProfilePage.vue
  
  &lt;template&gt;
   &lt;div&gt;{{myData}}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        myData:null
      }
    },
    async created(){
     this.myData = await this.$store.getters.myData;
    }
  }
  &lt;/script&gt;
  
  // AboutPage.vue
  
  &lt;template&gt;
   &lt;div&gt;{{myData}}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        myData:null
      }
    },
    async created(){
     this.myData = await this.$store.getters.myData;
    }
  }
  &lt;/script&gt;
  </code></pre>