Nuxt3+Pinia全局复用user、is_login变量的实现方案求助

问题背景 #

我在使用Nuxt3和Pinia时，每次需要在页面或组件中使用user、is_login变量，都要重复编写以下代码：

import { useAuthStore } from "~/stores/myCustomAuthStore";
import { storeToRefs } from 'pinia'
const authStore = useAuthStore();
const {user, is_login} = storeToRefs(authStore)

希望能通过插件、模块或nuxtApp.provide实现无需重复编写上述代码，直接使用这两个变量。

之前尝试创建了plugins/common.ts，但方案失效：

import { useAuthStore } from "~/stores/myCustomAuthStore";
import { storeToRefs } from 'pinia'
export default defineNuxtPlugin((nuxtApp) => {
    const authStore = useAuthStore();
    const {user, is_login} = storeToRefs(authStore)
    nuxtApp.provide('user', user.value)
    nuxtApp.provide('is_login', is_login.value)
})

在页面中使用const is_login = useNuxtApp().$is_login和const user = useNuxtApp().$user，但无法正常响应数据变化。

错误原因 #

之前的代码中，nuxtApp.provide传入的是user.value和is_login.value——这是静态值，不是Pinia返回的响应式Ref对象。当store中的数据更新时，页面无法感知到变化，自然不会同步更新。

两种可行解决方案 #

方案一：通过Nuxt插件提供响应式变量 #

1. 创建/修改插件文件（推荐命名为plugins/auth.ts）：

import { useAuthStore } from "~/stores/myCustomAuthStore";
import { storeToRefs } from 'pinia'

export default defineNuxtPlugin(() => {
  const authStore = useAuthStore();
  const { user, is_login } = storeToRefs(authStore)

  // 直接提供响应式的Ref对象，而非静态值
  return {
    provide: {
      user,
      is_login
    }
  }
})

2. 在页面/组件中使用：
   在<script setup>中：

// 方式1：解构获取
const { $user, $is_login } = useNuxtApp()

// 方式2：单独获取
const $user = useNuxtApp().$user
const $is_login = useNuxtApp().$is_login

• 模板中直接使用：{{ $user.name }}、{{ $is_login }}
• 脚本中访问值：$user.value、$is_login.value

方案二：使用Nuxt自动导入的组合式函数（推荐） #

这种方式更符合Nuxt3的最佳实践，无需手动调用useNuxtApp：

1. 在项目根目录的composables文件夹下创建useAuth.ts（如果没有composables文件夹，直接新建即可）：

import { useAuthStore } from "~/stores/myCustomAuthStore";
import { storeToRefs } from 'pinia'

export const useAuth = () => {
  const authStore = useAuthStore();
  const { user, is_login } = storeToRefs(authStore)
  
  // 可选：同时导出store中的方法（比如login、logout）
  const { login, logout } = authStore

  return {
    user,
    is_login,
    login,
    logout
  }
}

2. 在页面/组件中直接使用：
   Nuxt3会自动导入composables下的函数，无需写import：

const { user, is_login, login } = useAuth()

• 模板中使用：{{ user.name }}、{{ is_login }}
• 脚本中访问值：user.value、is_login.value
• 调用方法：login(credentials)

验证方法 #

修改store中的user或is_login值（比如触发登录/登出操作），检查页面是否自动更新数据，以此确认响应式生效。

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