title: Vuex - getting state after mutation
body: <p>I am very new to State Management. I'm currently building a product list with infinite loading features. These are my codes:</p>
  
  <p>This is my component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class=""&gt;
      &lt;section class="space--sm"&gt;
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-sm-12"&gt;
                      &lt;div v-for="(data, index) in products" v-bind:key="data.id" class="item col-sm-4 col-xs-12" :id="'data-id-'+data.id" &gt;
                          &lt;a href="#" v-on:click.prevent="selectProduct(data)" &gt;
                              &lt;h4&gt;{{data.name}}&lt;/h4&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;infinite-loading force-use-infinite-wrapper="true" @infinite="infiniteHandler" ref="infiniteLoading"&gt;
                          &lt;span slot="no-results"&gt;
                              No results
                          &lt;/span&gt;
                          &lt;span slot="no-more"&gt;
                              There are no more results
                          &lt;/span&gt;
                      &lt;/infinite-loading&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import InfiniteLoading from 'vue-infinite-loading';
  import { mapState, mapActions } from 'vuex';
  export default {
      name: 'List',
      computed: mapState({
          products: state =&gt; state.list.products
      }),
      methods: {
          ...mapActions('list', [
              'selectProduct'
          ]),
          infiniteHandler($state) {
              setTimeout(() =&gt; {
                  this.$store.dispatch('products/fetch')
  
                  console.log(this.products.length); 
                  //returns 0 but vue debugger says products state got datas
  
                  if (this.products.length) {
                      $state.loaded();
                      if(this.products.length &lt; 15){
                          $state.complete();
                      }
                  } else {
                      $state.complete();
                  }
              }, 1000);
          },
      },
      components: {
          InfiniteLoading
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my store:</p>
  
  <pre><code>import axios from 'axios';
  
  // initial state
  const state = {
      products: [],
      selected_product: [],
      page: 1
  }
  
  // getters
  const getters = {}
  
  // mutations
  const mutations = {
      FETCH(state, products) {
          state.products = state.products.concat(products);
      },
      selectProduct (state, { product }) {
          state.selected_product = product;
      },
      updatePage (state) {
          state.page += 1;
      },
  }
  
  // actions
  const actions = {
      fetch({ commit }) {
          return axios.get('/api/get/products', {
              params: {
                  page: state.page
              }
          })
          .then((response) =&gt; {
              commit('updatePage')
              commit('FETCH', response.data.data)
          })
          .catch();
      },
      selectProduct ({ state, commit }, product) {
          commit('selectProduct', { product })
      }
  }
  
  export default {
      namespaced: true,
      state,
      getters,
      actions,
      mutations
  }
  </code></pre>
  
  <p>In the infiniteHandler method, I did this :</p>
  
  <pre><code>this.$store.dispatch('products/fetch')
  </code></pre>
  
  <p>Afer mutation products state should have loaded data inside (checked using vue debugger) but when I do this after dispatching :-</p>
  
  <pre><code>console.log(this.products.length);
  </code></pre>
  
  <p>I get <strong>0</strong> which also means no datas present inside the state. Am I doing anything wrong? Also is this the best practice of using Vuex? Thank you</p>