javascript - Nuxt.js：全局混合仅在服务器端起作用(Nuxt.js: Global mixin only working on the Server-Side)

Question

I am creating an application using Nuxt.js.

(我正在使用Nuxt.js创建一个应用程序。)

I have a function that I need to use a lot in my application called isAuthneticated .

(我有一个需要在我的应用程序中使用很多功能的函数isAuthneticated 。)

Below is the function:

(下面是功能：)

~/mixins/auth.js

export default {
  computed: {
    isAuthenticated() {
      // make sure that user is logged in
      if (this.$store.state.auth.user) {
        this.user = this.$store.state.auth.user
        return true
      } else {
        return false
      }
    }
  },
}

As you can see I am exporting it as a computed property to another file which will register it as a global mixin, here's the code for that file:

(如您所见，我将其作为计算的属性导出到另一个文件，该文件会将其注册为全局mixin，这是该文件的代码：)

~/plugins/mixins.js

import Vue from 'vue'

import auth from '~/mixins/auth'

Vue.mixin(auth)

I registered this plugin using the nuxt.config.js :

(我使用nuxt.config.js注册了此插件：)

plugins: ['~/plugins/mixins']

Now If I try to use isAuthenticated in my template, I get the following error in the browser console:

(现在，如果我尝试在模板中使用isAuthenticated ，则在浏览器控制台中会出现以下错误：)

Property or method "isAuthenticated" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property.

But if I use the created hook on the mixin object and log something, it gets logged successfully in the terminal, rather than the console as created is run on the server-side.

(但是，如果我在mixin对象上使用了已created钩子并记录了一些内容，则它会成功记录在终端中，而不是在服务器端运行所created的控制台。)

My question is: Why isn't this working?

(我的问题是：为什么这行不通？)

Why is isAuthenticated undefined ?

(为什么isAuthenticated undefined ？)

Any help would be appreciated!!!

(任何帮助，将不胜感激！！！)

Edit 1:(编辑1：)

This is the code of the component that tries to use this computed property:

(这是尝试使用此计算属性的组件的代码：)

<template v-if="!isAuthenticated">
      <nuxt-link to="/register">
        <v-btn outlined color="primary" class="d-none d-md-flex mx-2">Sign Up</v-btn>
      </nuxt-link>
      <nuxt-link to="/login">
        <v-btn depressed color="primary" class="d-none d-md-flex mx-2">Login</v-btn>
      </nuxt-link>
    </template>

  ask by Nadir Abbas translate from so

Answer 1

等待大神答复