title: Vue intializing user store
body: <p>I have a module <code>auth</code> in my vuex store. There I want to store my user object (containing accesstoken, ...) Using the store, I can easily using store getters ask anywhere in my application whether user is logged in etc...</p>
  <p>I also store user information (accessToken, etc...) in <code>localStorage</code> in order to handle user coming back after closing application and user is still &quot;logged in&quot; (i.e. token is still valid).</p>
  <p>My question is: When user refreshes page, my <code>beforeEach</code> function is the first thing that is called. But at that time my user store has not been filled yet. So my</p>
  <p><code>let loggedIn = store.getters['auth/isLoggedIn'];</code> in <code>beforeEach</code> returns false.</p>
  <p>I have adde in <code>App.vue</code> <code>beforeMount</code>:</p>
  <pre><code>if (JSON.parse((localStorage.getItem(&quot;user&quot;) || '{}'))) {
        //This is the mutation to the user store
        this.SET_USER(JSON.parse((localStorage.getItem(&quot;user&quot;) || '{}')));
  </code></pre>
  <p>But this is called <strong>after</strong> <code>beforeEach</code> in <code>router</code> has already been executed. So at what place in my application should I place:</p>
  <pre><code>if (JSON.parse((localStorage.getItem(&quot;user&quot;) || '{}'))) {
        this.SET_USER(JSON.parse((localStorage.getItem(&quot;user&quot;) || '{}')));
  </code></pre>
  <p>So the user store is correctly filled right at the beginning?</p>