title: How to access store data in mounted function in vuex
body: <p>I am having one root component know as <code>App.vue</code>.  and another component named as <code>FileUploaderParent.vue</code>.  I am calling a dispatch promise to store the data in the store. I am calling dispatch under mounted lifecycle hook.</p>
  
  <p>On the other side, I am trying to access stored user data in the mounted function of a different component. It shows the error of undefined</p>
  
  <p>I know, a work around can be to call same dispatch promise on the mounted function. But, It feels like a hack and the dispatch call is getting redundant. </p>
  
  <p>Here is the code for <code>App.vue</code>:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;v-navigation-drawer  v-model="drawer" app temporary &gt;
        &lt;v-img :aspect-ratio="16/9" src="https://image.freepik.com/free-vector/spot-light-background_1284-4685.jpg"&gt;
          &lt;v-layout pa-2 column fill-height class="lightbox gray--text"&gt;
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;v-flex shrink&gt;
              &lt;!-- &lt;div class="subheading"&gt;{{this.$store.getters.userData.name}}&lt;/div&gt; --&gt;
              &lt;!-- &lt;div class="body-1"&gt;{{this.$store.getters.userData.email}}&lt;/div&gt; --&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
        &lt;/v-img&gt;
        &lt;v-list&gt;
          &lt;template v-for="(item, index) in items"&gt;
            &lt;v-list-tile :href="item.href" :to="{name: item.href}" :key="index"&gt;
              &lt;v-list-tile-action&gt;
                &lt;v-icon light v-html="item.icon"&gt;&lt;/v-icon&gt;                
              &lt;/v-list-tile-action&gt;
              &lt;v-list-tile-content&gt;
                &lt;v-list-tile-title v-html="item.title"&gt;&lt;/v-list-tile-title&gt;
              &lt;/v-list-tile-content&gt;
            &lt;/v-list-tile&gt;
          &lt;/template&gt;
        &lt;/v-list&gt;
      &lt;/v-navigation-drawer&gt;
      &lt;v-toolbar color="white" light :fixed=true&gt;
        &lt;v-toolbar-side-icon @click.stop="drawer = !drawer"&gt;&lt;/v-toolbar-side-icon&gt;
        &lt;v-img :src="require('@/assets/mad_logo.png')" max-width="80px" max-height="41px"  /&gt;     
        &lt;v-toolbar-title class="black--text justify-center" &gt; &lt;h1&gt;MeshApp&lt;/h1&gt;&lt;/v-toolbar-title&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-avatar color="primary"&gt;
          &lt;!-- &lt;span class="white--text headline"&gt;{{this.avatar.slice(0,2)}}&lt;/span&gt;          --&gt;
        &lt;/v-avatar&gt;   
      &lt;/v-toolbar&gt;
      &lt;v-content style="margin-top: 60px;"&gt;
        &lt;v-fade-transition mode="out-in"&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/v-fade-transition&gt;
      &lt;/v-content&gt;
    &lt;/v-app&gt;  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'app',
    components: {
  
    },
    data() {
      return {   
        avatar: '',    
        drawer: false,
        items: [
          {
            href: 'home',
            router: true,
            title: 'home',
            icon: 'grid_on',
          },
          {
            href: 'view_volunteers',
            router: true,
            title: 'View Volunteer',
            icon: 'group'
          },
          {
            href: 'profile',
            router: true,
            title: 'profile',
            icon: 'account_circle',
          }, 
          {
            href: 'logout',
            router: true,
            title: 'Logout',
            icon: 'toggle_off',
          }
  
        ]
      }
    },
    props: [], 
    mounted() {
     this.$store.dispatch('getUserData').
      then(() =&gt; {      
       let findAvatar = this.$store.getters.userData.name.split(" ")
       let createAvatar = ''
       for(let i = 0; i &lt; findAvatar.length; i++) {
         createAvatar = createAvatar + findAvatar[i].slice(0,1)
       }
       this.avatar = createAvatar
       console.log(this.avatar)
       // this.$store.dispatch('getUserId', id) 
     })    
    }   
  }
  
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  v-content {
    margin-top: 60px !important;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Here is the code for <code>FileUploaderParent.vue</code>:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-layout class="text-xs-center "&gt;
      &lt;v-flex&gt;
        &lt;image-input v-model="avatar"&gt;
          &lt;div slot="activator"&gt;
            &lt;v-avatar color = "primary" size="150px" v-ripple v-if="!avatar" class=" mb-3"&gt;
              &lt;h1 class="white--text"&gt;&lt;span&gt;{{this.defaultAvatar}}&lt;/span&gt;&lt;/h1&gt;
            &lt;/v-avatar&gt;
            &lt;v-avatar size="150px" v-ripple v-else class="mb-3"&gt;
              &lt;img :src="avatar.imageURL" alt="avatar"&gt;
            &lt;/v-avatar&gt;
          &lt;/div&gt;
        &lt;/image-input&gt;
        &lt;v-slide-x-transition&gt;
          &lt;div v-if="avatar &amp;&amp; saved == false"&gt;
            &lt;!-- Stores the Image and changes the loader --&gt;
            &lt;v-btn  class="primary" @click="uploadImage" :loading="saving"&gt;Save Avatar&lt;/v-btn&gt;
          &lt;/div&gt;
        &lt;/v-slide-x-transition&gt;
      &lt;/v-flex&gt;
    &lt;/v-layout&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import ImageInput from './FileUploaderChild.vue'
  
  export default {
    name: 'app',
    data () {
      return {
        defaultAvatar: '',
        avatar: null,
        saving: false,
        saved: false
      }
    },
    mounted() {
       this.$store.dispatch('getUserData').
      then(() =&gt; {
        let findAvatar = this.$store.getters.userData.name.split(" ")
        let createAvatar = ''
        for(let i = 0; i &lt; findAvatar.length; i++) {
          createAvatar = createAvatar + findAvatar[i].slice(0,1)
        }
        this.defaultAvatar = createAvatar
      })
    },
    components: {
      ImageInput: ImageInput
    },
    watch:{
      avatar: {
        handler: function() {
          this.saved = false
        },
        deep: true
      }
    },
    methods: {
      uploadImage() {
        this.saving = true
        setTimeout(() =&gt; this.savedAvatar(), 1000)
      },
      savedAvatar() {
        this.saving = false
        this.saved = true
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>This is how the store looks like:
  <code>store.js</code></p>
  
  <pre><code>actions: {
          getUserData(context)  {
              return new Promise((resolve, reject) =&gt; {
                  axios.get('http://someurl.in/api/v1/users/'+this.state.userId, {
                      headers: {
                          'Content-Type': 'application/json'               
                      },
                      auth: {
                          username: 'someusername',
                          password: 'pass'
                      }    
                  }).
                  then(response =&gt; {
                      context.commit('storeUserData', response.data.data.users)                    
                      resolve(response);  // Let the calling function know that http is done. You may send some data back
                  }).catch(error =&gt; {
                      reject(error);
                  })        
              })
          }
  },
  mutations: {
          storeUserData(state, data) {
              state.userData = data
          }
  }
  </code></pre>
  
  <p>This is how the error looks like:
  <a href="https://i.stack.imgur.com/a3PN5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a3PN5.png" alt="enter image description here"></a></p>
  
  <p>How do i access store data in <code>FileUploaderParent.vue</code> under mounted function?</p>