title: Vuejs Global User Object from Laravel API
body: <p>I have a small Laravel / VueJS app with single file components and it is a single page application. I use <a href="https://github.com/cklmercer/vue-stash" rel="nofollow noreferrer">vue-stash</a> for central state managment.</p>
  
  <p>Here is my store.js</p>
  
  <pre><code>export default {
      user: {
          name: null
      }
  }
  </code></pre>
  
  <p>And here is my api call from my dashboard.</p>
  
  <pre><code>&lt;script&gt;
      export default {
          mounted() {
              axios.get('/api/getAuthUser')
                      .then(response =&gt; {
                          this.$store.user.name = response.data.name;
                      });
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This works fine and it will set the user name in store to the user name i get from my api call.</p>
  
  <p>But if the first visit to my site is not the dashboard then there is no api call and the name is not set in the store. But I need that name at different places in my app. </p>
  
  <p>I don't wont to call my api from every component. Is it possible to call the api only once directly from my store? How can I do that or is there any better solution? </p>
  
  <p>Thanks!</p>
  
  <p><strong>// UPDATE</strong></p>
  
  <p>Is there any way to make a direct call from the store.js? </p>
  
  <pre><code>export default {
  user: {
      name: null
  },
  ready () {
      axios.get('/api/getAuthUser')
          .then(response =&gt; {
              this.user.name = response.data.name;
          });
      }
  }
  </code></pre>
  
  <p>This does not work. name is still null</p>
  
  <p>// Update 2</p>
  
  <pre><code>import axios from 'axios'
  
  axios.defaults.headers.common = {
      'X-CSRF-TOKEN': Laravel.csrfToken,
      'X-Requested-With': 'XMLHttpRequest'
  };
  
  
  
  export default {
      user: {
          name: null
      },
      setUser() {
          axios.get('/api/getAuthUser')
          .then(response =&gt; {
          this.user.name = response.data.name;
      });
  }}
  </code></pre>
  
  <p>This is my complete store.js but it seems that setUser() does not get executed.</p>