title: How can I pass data from vueJS to vuex
body: <p>In this example, I'm using axios to fetch some data for me and then I need to pass these values and store it in Vuex</p>
  
  <p>vue file with axios request:</p>
  
  <pre><code>&lt;script&gt;
      export default {
          data: function () {
              return {
                  userData: {},
                  login: {
                      username: '',
                      password: '',
                  },
              }
          },
          computed: {
              loggedInUser() {
                  return this.$store.state.loggedInUser;
              }
          },
          methods: {
              handleLoginFormSubmit() {
                  // send axios request to controller and from controller to gRPC
                  axios.post('/loginUser', this.login)
                      .then((response) =&gt; {
                          this.userData = JSON.parse(response.data[0]);
                      })
                  // set loggedInUser info to vuex store
                  this.$store.dispatch('loginUser',this.userData);
              }
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>when I inspect userData object is there with all info that I need
  now I have store.js file that should pass that userData and save it in Store but I always get empty object inside</p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  export const store = new Vuex.Store({
      state: {
          loggedInUser: {
              firstName: '',
              lastName: '',
              email: '',
              uuid: '',
          }
      },
      getters: {
          loggedUser(state){
              return state.loggedInUser;
          }
      },
      mutations: {
          loginUser: (state, payload) =&gt; {
              state.loggedInUser.firstName = payload;
              state.loggedInUser.lastName = 1;
              state.loggedInUser.email = 1;
              state.loggedInUser.uuid = 1;
          }
      },
      actions: {
          loginUser: (context, payload) =&gt; {
              setTimeout(function () {
                  console.log(payload);
                  context.commit('loginUser', payload)
              }, 3000)
          }
      }
  });
  </code></pre>
  
  <p>my mutation looks like this</p>
  
  <blockquote>
    <p>type:"loginUser" </p>
    
    <p>payload:Object (empty)</p>
  </blockquote>
  
  <p>where did I do something wrong?</p>