javascript - vuejs 无法在导航栏中获取 vuex 值

Question

我正在尝试在导航栏中验证我的用户，但它返回

[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘类型’”

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

现在，即使在导航栏本身，如果我这样做{{this.$store.getters.loggedUser.type}}，它也会打印我正在寻找的内容，但因为它<li>会返回错误。

任何想法？

标签： javascriptvue.jsvuejs2vue-router

Answer 1

在导航栏中放置一个上限条件。我不确定是否仍然适用于你的。像这样

<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">