title: VueX: wait until store data is loaded
body: <p>I am currently stuck at trying to show a form to edit a existing site.</p>
  
  <p>My Problem is one site has about 60 Input fields and writing setters and getters for every input seems not like a good approach. </p>
  
  <p>So the best thing I could think of is to save my store data to a local variable, edit the local variable and send it back. </p>
  
  <p><strong>Edit.vue</strong></p>
  
  <pre><code>&lt;b-form-input id="currentSiteName" v-model="this.editSite.title"&gt;&lt;/b-form-input&gt;
  
  ...
  computed: {
    editSite() {
      return this.$store.state.currentSite
    }
  },
  mounted: function() {
    this.$store.dispatch('SHOW_SITE', {
      siteId: this.$route.params.id
    });
  },
  </code></pre>
  
  <p><strong>Store action</strong></p>
  
  <pre><code>SHOW_SITE: function ({ commit }, siteParams) {
    http.get('/sites/' + siteParams.siteId).then((response) =&gt; {
        commit('SHOW_SITE', {
          site: response.data.foundSite
        });
      },
      (err) =&gt; {
        // eslint-disable-next-line
        console.log(err);
      })
  },
  </code></pre>
  
  <p><strong>Store mutations</strong></p>
  
  <pre><code>SHOW_SITE: (state, { site }) =&gt; {
      state.currentSite = site;
  },
  </code></pre>
  
  <p>If I look in my vue-dev-tools I can see that editSite has the correct values and the values are all shown in the form but i get following two errors: </p>
  
  <pre><code>Error in event handler for "input": "TypeError: Cannot read property 'editSite' of null"
  
  Cannot read property 'editSite' of null at callback
  </code></pre>
  
  <p>What I am doing wrong here or is there a better / c way to solve my problem?</p>
  
  <p>Any help would be greatly appreciated!</p>