currentUser not getting set with Vuex

Question

I added some code to my vue project so I can save the state of a user - which is whether he is logged in or not. If the state is not null, I want to display the navbar and footer. I added all the vuex import statements. I am using an axios call to the db which returns a json response. response.data comes back as true/false. If true, I redirect the user to the main page. Then I create a user object called currentUser, but I'm not sure what to base it on, so it is getting set to null. I need to use the state in a few places throughout my app, but it is not getting set. Please someone help. Thanks in advance. (code is below)

User.js:

            import JwtDecode from 'jwt-decode'

        export default class User {
          static from (token) {
            try {
              let obj = JwtDecode(token)
              return new User(obj)
            } catch (_) {
              return null
            }
          }

          
              constructor ({username}) {
            this.username = username 
            
          }

        
        }

App.vue:

            <template>
          <div id="app">
            <template v-if="currentUser">
              <Navbar></Navbar>
            </template>
            <div class="container-fluid">
              <router-view></router-view>
              <template v-if="currentUser">
                <Foot></Foot>
              </template>
            </div>
          </div>
        </template>


        <script>
        import { mapGetters } from 'vuex'
        import Navbar from '@/components/Navbar'
        import Foot from '@/components/Foot'

        export default {

        name: 'App',
        components: {
          Navbar,
          Foot
        },
        computed: {
            ...mapGetters({ currentUser: 'currentUser' })
          },
  

mutation_types.js:

                        export const LOGIN = 'LOGIN'
                        export const LOGOUT = 'LOGOUT'

auth.js:

            /* global localStorage */

        import User from '@/models/User'
        import * as MutationTypes from './mutation_types'

        const state = {
          user: User.from(localStorage.token)
        }


        const mutations = {
            [MutationTypes.LOGIN] (state) {
              state.user = User.from(localStorage.token)
            },
            [MutationTypes.LOGOUT] (state) {
              state.user = null
            }
          }
          
          const getters = {
            currentUser (state) {
              return state.user
            }
          }
          
          const actions = {
            login ({ commit }) {
              commit(MutationTypes.LOGIN)
            },
          
            logout ({ commit }) {
              commit(MutationTypes.LOGOUT)
            }
          }
          
          export default {
            state,
            mutations,
            getters,
            actions
          }

Answer 1

I took a little look and it seems you use '=' instead of Vue.set() to set your state variable.

Refer to the answer : vuex - is it possible to directly change state, even if not recommended?

Answer 2

The user store should only set the default state. AFter making request to validate user. You should use actions and mutations to set the user state. Call the action via store.dispatch("user/login", user) where you return new User(obj).

    let obj = JwtDecode(token)
    const user = new User(obj)
    store.dispatch("user/login", user)

    const actions = {
            login ({ commit }, userObject) {
              commit(MutationTypes.LOGIN, userObject)
            },
    
            logout ({ commit }) {
              commit(MutationTypes.LOGOUT)
            }
    }

    const mutations = {
            [MutationTypes.LOGIN] (state, user) {
              state.user = user;
            },
            [MutationTypes.LOGOUT] (state) {
              state.user = null
            }
    }

On a other note, you have dumb getters. Meaning they just return the state. You can rather call the user object directly out of state. Use getters when you want to modify the return value before returning it.