Nuxtjs Vue-session - 无法读取未定义的属性“退出”答案

【问题标题】：Nuxtjs Vue-session - Cannot read property 'exits' of undefinedNuxtjs Vue-session - 无法读取未定义的属性“退出”
【发布时间】：2019-06-15 17:35:22
【问题描述】：

我想在Nuxt.js 中支持Vue-session。

我已经使用Vue.js 创建了一个网站，但它不适用于SEO。

所以，我使用Nuxt.js 制作了一个新的前端。我将一些组件从目录Vue.js 复制到Nuxt.js 并运行。

但它不起作用。我在Header.vue 中收到一个错误 - 登录。这是我的代码。

类型错误

无法读取未定义的属性“退出”

https://imgur.com/a/hkccHvL

在 Header 中，vue 有代码，请查看。

<template>
      <b-navbar sticky toggleable="md" class="navbar-dark bd-navbar" type="dark">
        <b-navbar-toggle target="bd-main-nav" />
        <b-navbar-brand to="/">My Blog</b-navbar-brand>
        <b-collapse
          is-nav
          class="justify-content-between"
          id="bd-main-nav">
          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
            <b-nav-item v-if="this.isLoggedIn==true">     
              <span v-show="userName.length > 0" class="align-middle ml-2 text-color">
                {{userName}}
              </span>
              <b-button size="sm" class="my-2 my-sm-0 btn-outline-light btn-space" @click="clickToSignOut">
                Sign out
              </b-button>
            </b-nav-item>
            <b-nav-item v-else>
              <b-button size="sm" class="my-2 my-sm-0 btn-outline-light" 
                @click="this.clickToLogin"
                >Login
              </b-button>
            </b-nav-item>   
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </template>
    <script>
    export default {
        name: 'Header',
        data() {
          return {
            userName:'',
            profileUrl:'',
            isLoggedIn: false
          }
        },
        created() {
          if (this.$session.exits()) {
            let userObject = this.$session.get('loggedInUser')
            this.userName = userObject.name ? userObject.name : ''
            this.profileUrl = userObject.profileUrl ? userObject.profileUrl : ''
            this.isLoggedIn = userObject ? true : false
          } else {
            this.userName = ""
            this.profileUrl = ""
            this.isLoggedIn = false
          }
        },
        methods: {
          clickToLogin() {
            // this.$emit('clickToLogin')
            this.$router.push("Login")
          },
          clickToSignOut() {         
            this.userName = ''
            this.profileUrl = ''
            this.isLoggedIn = false           
            // this.$emit('clickToSignOut')   
            this.$session.destroy()
            this.$router.push('/')
          }, 
        }
    }

在 nuxt.config.js 中

    const pkg = require('./package')


    module.exports = {
      mode: 'universal',
      head: {
        title: pkg.name,
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { hid: 'description', name: 'description', content: pkg.description }
        ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ],
      },
      loading: { color: '#fff' },
      css: [
      ],
      plugins: [
        '~/plugins/VueSession.js',
        '~/plugins/VeeValidate.js'
      ],
      modules: [,
        // Doc: https://bootstrap-vue.js.org/docs/
        'bootstrap-vue/nuxt'
      ],
      build: {
        extend(config, ctx) {
        }
      }
    }

这里是js部分的内容，请看出来给我答案插件/VueSession.js

import Vue from 'vue'
import VueSession from 'vue-session'
if (process.client) {
  Vue.use(VueSession)
}

【问题讨论】：

您的插件设置为仅在客户端应用，但是您尝试在创建的挂钩中访问它，该挂钩在服务器上执行，因此出现错误
非常感谢！我该如何解决？
使用只在客户端执行的挂载钩子，或者将您的代码包装在使用 if process.client 创建的代码中

标签： javascript vue.js nuxt.js

【解决方案1】：

您试图在创建的钩子中访问 VueSession，该钩子在服务器端触发，而您的插件仅在客户端加载，这就是 VueSession 未定义的原因。

要么将代码从created()方法移到mounted()中，因为mounted()只在客户端执行，或者添加if(process.browser)检查，看是否是客户端。

或者，使用 nuxt-session (https://www.npmjs.com/package/nuxt-session)，它相当于 Vue.js 插件的 Nuxt.js。

希望这会有所帮助，干杯！

【讨论】：