在 nuxt3 中的所有页面/组件中使用变量（或存储）答案

【问题标题】：Use variables (or store) in all page/component, in nuxt3在 nuxt3 中的所有页面/组件中使用变量（或存储）
【发布时间】：2022-11-30 19:45:52
【问题描述】：

我正在使用 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.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)
    nuxtApp.provide('is_login', is_login)
}

我把代码放在下面

const is_login = useNuxtApp().$is_login
const user = useNuxtApp().$user

这是最好的解决方案吗？

【问题讨论】：

标签： nuxtjs3 pinia

【解决方案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>

【讨论】：