vuejs 无法在导航栏中获取 vuex 值答案

【问题标题】：vuejs can't get vuex value in navbarvuejs 无法在导航栏中获取 vuex 值
【发布时间】：2020-01-24 09:23:35
【问题描述】：

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

[Vue 警告]：渲染错误：“TypeError：无法读取属性 'type' 未定义”

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> 中，它会返回错误。

有什么想法吗？

【问题讨论】：

尝试删除模板中的this。所以只需$store.getters...
@Dan 结果相同 :(
能否调试一下 store 动作 user 并确认响应是否确实返回了正确的数据？
@mafortis 不要内联，因为它必须设置状态 1，然后吸气剂你可以放一些延迟或尝试其他一些姿势
@YomS。正如我所说，我已在导航栏中打印它并返回我正在寻找的数据，并且显示受此保护的链接，这意味着 $store.getters.loggedUser.type == 'admin 是真的，但我得到了错误

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

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

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

另一方面。我对它所做的是我为loggedUser 类型分离了另一个状态。这似乎不是一个好方法，但它会帮助你。

如果您要为此创建一个单独的状态，那么现在您必须通过 this 调用它

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

【讨论】：