title: Async/Await with Vuex dispatch
body: <p>I am making a loader for some components in my app.</p>
  
  <p>Here is my component:</p>
  
  <pre><code>        mounted() {
              this.loading = true;
  
              this.getProduct();
          },
          methods: {
              async getProduct() {
                  await this.$store.dispatch('product/getProducts', 'bestseller');
  
                  console.log(123);
  
                  this.loading = false;
              }
          },
  </code></pre>
  
  <p>Vuex action:</p>
  
  <pre><code>getProducts({commit}, type) {
          axios.get(`/api/products/${type}`)
              .then(res =&gt; {
                  let products = res.data;
                  commit('SET_PRODUCTS', {products, type})
              }).catch(err =&gt; {
              console.log(err);
          })
      },
  </code></pre>
  
  <p>The problem is in this line: <code>await this.$store.dispatch('product/getProducts', 'bestseller');</code></p>
  
  <p>I expect the code will stop at that line and wait for data is loaded from AJAX call and then set the loading is <code>false</code>;</p>
  
  <p>But it isn't. The loading is still set <code>false</code> and the <code>console.log</code> run before my data is ready.</p>
  
  <p>I already tried to move async/await into Vuex action and it worked. However, I didn't get the difference between them.</p>
  
  <p>Below code is worked for me:</p>
  
  <p>Component:</p>
  
  <pre><code>mounted() {
              this.loading = true;
  
              this.$store.dispatch('product/getProducts', 'bestseller').then((res) =&gt; {
                  this.loading = false;
              });
          },
  </code></pre>
  
  <p>Vuex action:</p>
  
  <pre><code>async getProducts({commit}, type) {
          let res = await axios.get(`/api/products/${type}`);
  
          commit('SET_PRODUCTS', {products: res.data, type});
      }
  </code></pre>