能否在Pinia Store中使用Nuxt3插件？使用时遇错误求助

我尝试在Pinia Store中调用Nuxt3自定义插件时出现错误，错误信息显示useNuxtApp is not defined。

相关代码 #

自定义插件（plugins/hello.ts）

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg) => `Hello ${msg}!`,
    },
  };
});

Pinia Store（store/mainStore.ts）

import { defineStore } from "pinia";

export const useMainStore = defineStore("MainStore", {
  state: () => ({
    errors: [],
  }),

  actions: {
    async logout() {
      const { $hello } = useNuxtApp();
      const msg = $hello("world");
      console.log(msg);
    },
  },
});

解决方案 #

问题源于Pinia Store的action中调用useNuxtApp()时，可能未处于Nuxt的应用上下文环境中。以下两种方法可以解决：

方法一：从组件传递插件实例到Store action

在调用Store方法的组件中先获取插件，再将其作为参数传入：

// 组件代码
const { $hello } = useNuxtApp();
const mainStore = useMainStore();
mainStore.logout($hello);

修改Store的action接收参数：

// store/mainStore.ts
actions: {
  async logout(hello) {
    const msg = hello("world");
    console.log(msg);
  },
},

方法二：在Store中正确导入并使用useNuxtApp

在Store顶部明确导入useNuxtApp，确保能获取到Nuxt应用上下文：

// store/mainStore.ts
import { defineStore } from "pinia";
import { useNuxtApp } from "#app"; // 导入useNuxtApp

export const useMainStore = defineStore("MainStore", {
  state: () => ({
    errors: [],
  }),

  actions: {
    async logout() {
      const { $hello } = useNuxtApp();
      const msg = $hello("world");
      console.log(msg);
    },
  },
});

注意：若涉及服务端渲染场景，需确保useNuxtApp()在有效的上下文环境中调用，避免上下文缺失问题。

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