在nuxt3中的所有页面/组件中使用变量(或存储)

Question

我用的是nuxt3，皮尼亚。我可以在特定的vue页面中使用用户is_login变量，如下所示。

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

我想要的是在另一个页面(或组件)中使用用户、is_login变量，而不编写上面的4行代码。

我认为我需要使用插件或模块或nuxtApp.provide，我应该如何做到详细？

-我试的是

我做了插件/通用的

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

这不是工作。

Answer 1

您可以为此编写一个可组合的(请参阅https://nuxt.com/docs/guide/directory-structure/composables#composables-directory)：

在"composables“目录中创建composables/use-auth.ts文件

// composables/use-auth.ts

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

export const useAuth = () => {
  const pinia = usePinia();
  const authStore = useAuthStore(pinia);

  const { user, is_login } = storeToRefs(authStore);

  return {
    user,
    is_login,
  };
}

然后，在您的组件中，您可以像这样使用它：

<script setup>
const { user, is_login } = useAuth();
</script>