Nuxt.js全局混入仅在服务端生效，前端isAuthenticated未定义求助

你遇到的这个问题主要有两个核心原因：

1. Nuxt插件写法不符合规范 #

你的~/plugins/mixins.js直接执行了Vue.mixin(auth)，但Nuxt的插件系统要求插件文件必须导出一个函数——Nuxt会在应用初始化时（客户端和服务端分别）调用这个函数，传入上下文参数。直接执行代码的写法可能导致混入没有在客户端被正确注册，所以组件渲染时找不到isAuthenticated这个计算属性。

2. 混入中存在非响应式属性赋值 #

你在isAuthenticated计算属性里直接给this.user赋值，但没有在混入的data中声明user属性。这不仅会触发Vue的非响应式警告，还可能导致user属性无法随store中的数据变化更新，间接影响isAuthenticated的准确性。

另外，created钩子只在服务端输出日志，也是因为插件没有在客户端正确注册，导致混入的钩子只在服务端执行了一次。

步骤1：修正插件文件的写法 #

修改~/plugins/mixins.js，按照Nuxt插件规范导出函数：

import Vue from 'vue'
import auth from '~/mixins/auth'

// 导出函数，让Nuxt在正确时机执行混入注册
export default () => {
  Vue.mixin(auth)
}

步骤2：优化混入的响应式逻辑 #

重新编写~/mixins/auth.js，把user也改为计算属性，避免非响应式赋值问题，同时简化isAuthenticated的判断逻辑：

export default {
  computed: {
    // 用计算属性直接映射store中的用户数据，自动响应变化
    user() {
      return this.$store.state.auth.user
    },
    isAuthenticated() {
      // 用!!快速将用户对象转为布尔值，判断是否登录
      return !!this.user
    }
  },
  created() {
    // 区分客户端和服务端日志，方便验证
    console.log(`Auth mixin created - ${process.client ? '客户端' : '服务端'}`)
  }
}

步骤3：验证配置并重启服务 #

确保nuxt.config.js中的插件路径正确：

export default {
  plugins: ['~/plugins/mixins.js']
}

然后重启Nuxt开发服务，此时你应该能在浏览器控制台看到客户端的created钩子日志，组件模板中使用isAuthenticated也不会再报错。

在使用isAuthenticated的组件中添加一个测试钩子，确认计算属性能正常访问：

export default {
  created() {
    console.log('组件中isAuthenticated值：', this.isAuthenticated)
  }
}

如果控制台能正确输出布尔值，说明混入已经全局生效了。

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