vuejs не может получить значение vuex в navbar - PullRequest
Новая
       6

vuejs не может получить значение vuex в navbar

0 голосов
/ 24 января 2020

Я пытаюсь проверить пользователя в navbar, но он возвращает

[Vue warn]: Ошибка при рендеринге: «Ошибка типа: не удается прочитать свойство« тип »из неопределенного» * ​​1004 *

App.vue (основной компонент для маршрутов) 

<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
       }
      },
    }

Теперь даже в самом navbar, если я делаю {{this.$store.getters.loggedUser.type}}, он печатает то, что я ищу, но так как он в этом <li>, он возвращает ошибку.

Есть идеи?

1 Ответ

1 голос
/ 24 января 2020

Поместите верхнее условие в вашу панель навигации. Я не уверен, будет ли все еще работать в вашем. Вот так 

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

С другой стороны. Что я сделал на этом, я отделил другое состояние для типа loggedUser. Кажется, что это не очень хорошо, но тогда это поможет

если вы создадите отдельное состояние для этого, то теперь вы должны вызвать его по этому 

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