vuejs can't get vuex value in navbar

Question

I am trying to validate my user in navbar but it return

[Vue warn]: Error in render: "TypeError: Cannot read property 'type' of undefined"

App.vue (main component for routes)

<router-view id="content" :user="user" :currency="currency" :key="$route.fullPath"></router-view>
///////
methods: {
  currency() {
    this.$store.dispatch('currency')
  },
  user() {
    this.$store.dispatch('user')
  },
}

store.js

state: {
    user: {},
    currency: {}
  },
  mutations: {
    currency(state, currency){
      state.currency = currency
    },
    user(state, user){
      state.user = user
    }
  },
  actions: {
    user({commit}){
      return new Promise((resolve, reject) => {
        commit('user')
        axios.get('/api/auth/user', {
          headers: {
              Authorization: 'Bearer ' + localStorage.getItem('access_token')
          }
        })
        .then(resp => {
          const user = resp.data
          commit('user', user)
          resolve(resp)
        })
        .catch(err => {
          commit('user')
          reject(err)
        })
      })
    },
    getters: {
        isLoggedIn: state => !!state.token,
        loggedUser: state => state.user,
        currency: state => state.currency,
    }

navBar.vue

    <li v-if="isLoggedIn && this.$store.getters.loggedUser.type == 'admin'" class="nav-item dropdown">
      ...
    </li>
    ///////
    export default {
      props:['currency', 'user'],
      name: 'navbar',
      data() {
       return {
        userPhoto: '',
        site_name: process.env.MIX_APP_NAME
       }
      },
      computed : {
       isLoggedIn() {
          return this.$store.getters.isLoggedIn
       }
      },
    }

Now even in navbar itself if i do {{this.$store.getters.loggedUser.type}} it print what i'm looking for but since it's in that <li> it returns error.

Any idea?

Try removing this in the template. So just $store.getters... — Dan
– Dan, Commented Jan 24, 2020 at 9:27
Can you debug the store action user and confirm if the response actually returns the right data? — Yom T.
– Yom T., Commented Jan 24, 2020 at 9:35
@mafortis don't put inline because it has to set state 1st then getters you can put some dely or try some other posmise — Kamlesh Paul
– Kamlesh Paul, Commented Jan 24, 2020 at 9:36
@YomS. as i said i have print it in navbar and it return the data i'm looking for also the link that is protected by this is showing so that means $store.getters.loggedUser.type == 'admin is true, yet i'm getting error — mafortis
– mafortis, Commented Jan 24, 2020 at 9:38

Qonvex620 · Accepted Answer · 2020-01-24 09:39:02Z

1

Put an upper condition in your navbar. Im not sure if will still works in yours. Like this

<template v-if="$store.getters.loggedUser">
    <li v-if="isLoggedIn && $store.getters.loggedUser.type == 'admin'" class="nav-item 
    dropdown">
      ...
    </li>
</template>

On the other hand. What I did on it is I separated another state for loggedUser type. It seems that not the good way but it will help you then.

if you will make a separate state for that then now you have to call it by this

 <li v-if="isLoggedIn && $store.getters.loggedUser_type == 'admin'" class="nav-item 
        dropdown">

answered Jan 24, 2020 at 9:39

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuejs can't get vuex value in navbar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related