NuxtJS全局检查用户登录状态：子组件无法获取LoggedIn状态

首先看你代码里的几个明显问题，咱们一步步来修复：

1. 修正布局组件的语法错误 #

你在~/layouts/default.vue里把computed写了两层嵌套，这是语法错误，导致计算属性根本没正确注册。正确的写法应该是：

<template>
  <router-view></router-view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    // 只需要一层computed，去掉嵌套的那个
    ...mapGetters({
      LoggedIn: 'authUser'
    })
  }
}
</script>

2. 子组件无法直接访问布局组件的属性 #

即使修正了语法，子组件也不能直接拿到布局组件里的LoggedIn——因为Vue组件的作用域是独立的，父组件（布局）的属性不会自动传递给子组件（页面/组件）。

这里有两种常用的解决方案：

方案一：在子组件中直接映射Vuex状态（推荐） #

既然你已经用了Vuex来管理登录状态，最直接的方式就是在需要用到登录状态的子组件里，同样通过mapGetters或者mapState来获取：

<template>
  <div class="index-page">
    <div v-if="LoggedIn">asdasd</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      LoggedIn: 'authUser'
    })
  },
  mounted() {
    console.log(this.LoggedIn) // 现在能正确拿到登录状态了
  }
}
</script>

方案二：用provide/inject全局传递状态 #

如果你不想在每个子组件里都写映射代码，可以在布局组件里通过provide把状态传递下去，子组件用inject接收：

布局组件修改：

<template>
  <router-view></router-view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      LoggedIn: 'authUser'
    })
  },
  // 提供响应式的登录状态
  provide() {
    return {
      isLoggedIn: this.LoggedIn
    }
  }
}
</script>

子组件使用：

<template>
  <div class="index-page">
    <div v-if="isLoggedIn">asdasd</div>
  </div>
</template>

<script>
export default {
  // 注入布局提供的状态
  inject: ['isLoggedIn'],
  mounted() {
    console.log(this.isLoggedIn)
  }
}
</script>

3. 确保Vuex里的authUser getter正确 #

最后要确认你的Vuex store里确实有authUser这个getter，并且它返回的是布尔值（表示是否登录）。比如你的store模块代码大概是这样：

// store/modules/auth.js
export const state = () => ({
  user: null // 未登录时为null，登录后存储用户信息
})

export const getters = {
  // 用!!把user转为布尔值，判断是否登录
  authUser: state => !!state.user
}

这样一套操作下来，你就能在子组件里正确获取并使用全局登录状态了。

内容的提问来源于stack exchange，提问作者KitKit