title: How to wait for action to complete before accessing the Vue Store state?
body: <p>I have <code>Vuejs/Nuxtjs</code> application within which I need to access a <code>Vuex</code> store <code>state</code> after it has been modified by <code>Vuex action</code>. Currently when I try to run the <code>action</code> and <code>assignment</code> then I get the old state and not the one which was updated after <code>action</code>.</p>
  <p>How to make the code wait for <code>action</code> completion then run the next statement? Following is the code I have currently:
  Vuejs Component:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;input v-model=&quot;formData.value&quot; type=&quot;text&quot;&gt;
      &lt;button @click=&quot;performAction&quot;&gt;
        Click Me
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
        formData: {
          value: '',
          returnValue: ''
        }
      }
    },
    methods: {
      performAction () {
        // Set the value within the Vuex Store
        this.$store.commit('modules/DataStore/populateData', this.formData.value)
  
        // Perform the Action
        this.$store.dispatch('modules/DataStore/getData').then(() =&gt; {
          console.log(&quot;AFTER COMPLETE ACTION&quot;)
        })
  
        // Assign the update value to the variable
        this.formData.returnValue = this.$store.state.modules.DataStore.data
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  <p>Vuex Store:</p>
  <pre><code>export const state = () =&gt; ({
    data:''
  })
  
  export const mutations = {
    populateData (state, data) {
      state.data = data
    }
  }
  
  export const actions = {
      getData ({ commit, state, dispatch }) {
          const headers = { 'Content-Type': 'application/json' }
          this.$axios
              .post('/getUrlData', state.data, { headers })
              .then((response) =&gt; {
                  console.log(&quot;WITHIN RESPONSE&quot;)
                  commit('populateData',response.data)
              })
              .catch((error) =&gt; {
                  commit('populateData', 'Unable to obtain data, Error : ' + error)
              })
      }
  }
  </code></pre>
  <p>Following are the thing I tried and nothing is working at the moment:</p>
  <ol>
  <li>I tried the <code>.then()</code> function.</li>
  <li>I tried <code>Async</code> and <code>await</code> but both are not working</li>
  </ol>
  <p>Any suggestions will be really appreciated. Thanks in advance.</p>