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

Question

我使用的是nuxt3, pinia。我可以在一个特定的vue页面中使用user、is_login变量，如下所示。

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

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

我想我需要使用插件或模块或nuxtApp。提供，我应该如何做详细?

------我尝试的是-------

我制作了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

This is not work.

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>