title: How to receive user information after logging in with vue.js in "Vuexy Admin Dashboard Template"
body: <p>I need help to get information from the user after logging. in Vuexy Vuejs Admin Dashboard Template.
  With the current code, it now uses fake information.</p>
  <p>please guide me.</p>
  <p><a href="https://i.stack.imgur.com/i0KQz.jpg" rel="nofollow noreferrer">Look at this picture; The username is currently being read from a fake database.</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// axios
  import axios from 'axios'
  
  const baseURL = 'http://127.0.0.1:8000'
  
  export default axios.create({
    baseURL,
    headers:{
      common:{
        'Access-Control-Allow-Origin' : '*'
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Using the following code, we read the user name from the fake database.
  activeUserInfo.displayName</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//ProfileDropDown.vue
  &lt;template&gt;
    &lt;div class="text-right leading-tight hidden sm:block"&gt;
      &lt;p class="font-semibold"&gt;{{ activeUserInfo.displayName }}&lt;/p&gt;
      &lt;small&gt;Available&lt;/small&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    data () {
      return {
      }
    },
    computed: {
      activeUserInfo () {
        return this.$store.state.AppActiveUser
      }
    },
    methods: {
    }
  }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Finally, the user's fake name is returned from here.
  displayName: &quot;Mary Adams&quot;,</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//state.js
  /*=========================================================================================
    File Name: state.js
    Description: Vuex Store - state
    ----------------------------------------------------------------------------------------
    Item Name: Vuexy - Vuejs, HTML &amp; Laravel Admin Dashboard Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
  ==========================================================================================*/
  
  import navbarSearchAndPinList from '@/layouts/components/navbar/navbarSearchAndPinList'
  import themeConfig, { colors } from '@/../themeConfig.js'
  
  // /////////////////////////////////////////////
  // Helper
  // /////////////////////////////////////////////
  
  // *From Auth - Data will be received from auth provider
  
  const userDefaults = {
    uid         : 0,          // From Auth
    displayName : "Mary Adams", // From Auth
    about       : 'Dessert chocolate cake lemon drops jujubes. Biscuit cupcake ice cream bear claw brownie brownie marshmallow.',
    photoURL    : require('@assets/images/portrait/small/avatar-s-11.jpg'), // From Auth
    status      : 'online',
    userRole    : 'admin'
  }
  
  const getters = {
    // get_user : response.data.userInfo
  }
  
  const userInfoLocalStorage = JSON.parse(localStorage.getItem('userInfo')) || {}
  
  // Set default values for active-user
  // More data can be added by auth provider or other plugins/packages
  const getUserInfo = () =&gt; {
    const userInfo = {}
  
    // Update property in user
    Object.keys(userDefaults).forEach((key) =&gt; {
      // If property is defined in localStorage =&gt; Use that
      userInfo[key] = userInfoLocalStorage[key] ?  userInfoLocalStorage[key] : userDefaults[key]
    })
  
    // Include properties from localStorage
    Object.keys(userInfoLocalStorage).forEach((key) =&gt; {
      if (userInfo[key] === undefined &amp;&amp; userInfoLocalStorage[key] !== null) userInfo[key] = userInfoLocalStorage[key]
    })
  
    return userInfo
  }
  
  
  // Check if device is touch device
  // This is used to remove perfect scrollbar from touch devices
  // Using Dynamic components
  const is_touch_device = () =&gt; {
    const prefixes = ' -webkit- -moz- -o- -ms- '.split(' ')
    const mq = function (query) {
      return window.matchMedia(query).matches
    }
  
    if ('ontouchstart' in window || window.DocumentTouch) {
      return true
    }
  
    // include the 'heartz' as a way to have a non matching MQ to help terminate the join
    // https://git.io/vznFH
    const query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('')
    return mq(query)
  }
  
  
  // /////////////////////////////////////////////
  // State
  // /////////////////////////////////////////////
  
  const state = {
    AppActiveUser           : getUserInfo(),
    bodyOverlay             : false,
    isVerticalNavMenuActive : true,
    is_touch_device         : is_touch_device(),
    mainLayoutType          : themeConfig.mainLayoutType || 'vertical',
    navbarSearchAndPinList,
    reduceButton            : themeConfig.sidebarCollapsed,
    verticalNavMenuWidth    : 'default',
    verticalNavMenuItemsMin : false,
    scrollY                 : 0,
    starredPages            : navbarSearchAndPinList['pages'].data.filter((page) =&gt; page.is_bookmarked),
    theme                   : themeConfig.theme || 'light',
    themePrimaryColor       : colors.primary,
  
    // Can be used to get current window with
    // Note: Above breakpoint state is for internal use of sidebar &amp; navbar component
    windowWidth: null
  }
  
  export default state</code></pre>
  </div>
  </div>
  </p>
  <p>Now I want to help you how I can read information from mysql database.</p>