title: Vue / Vuex State Management best practice for auth
body: <p>Not sure if this is the right place for this question since its more of "best practice" and not technical per say but I am new to building a SPA with Vue. From what I have seen so far Vuex is a good tool to handle the state of cross component application data. What I currently have is working good for my user, logged in status and side-drawer menu state (open / closed), but before I go down a rabbit hole I wanted to get some community input on my <code>store.js</code> setup. Auth uses JWT. </p>
  
  <p>Is it good practice to use store to handle login, logout and the user info? All the tutorials I have found are not to real world (using it for a counter or something). </p>
  
  <p>If this is not the appropriate place to ask this before down voting, please let me know the right Stack Exchange site to ask. </p>
  
  <pre><code>import Vuex from 'vuex';
  
  
  export const store = new Vuex.Store({
  
      state:{
          isLoggedIn: !!localStorage.getItem("jwt_token"),
          user: localStorage.getItem("user")? JSON.parse( localStorage.getItem("user") ) : {},
          showDrawer: false
      },
  
      mutations:{
  
          login: state =&gt;{
  
              state.isLoggedIn = true;
  
              state.user = JSON.parse( localStorage.getItem("user") );
  
              //set the Axios header so we pass Auth on the API
              window.axios.defaults.headers.common['Authorization'] = localStorage.getItem("jwt_token");
  
          }, 
  
          logout: state =&gt;{
  
              localStorage.setItem("jwt_token", '');
  
              localStorage.setItem("user", '');
  
              state.isLoggedIn = false;
  
              state.user = {};
  
              state.showDrawer = false;
          },
  
          openDrawer: state =&gt;{
              state.showDrawer = true;
          },
  
          closeDrawer: state =&gt;{
              state.showDrawer = false;
          }
      },
  
  })
  </code></pre>