如何编写一个可在客户端和服务器上运行的简单 Nuxt 3 可组合项

Question

我正在努力寻找一种方法来编写可在客户端和服务器端工作的简单可组合项。我有一个简单的函数，它只是收集我希望能够在客户端和服务器上调用的应用程序首选项。该函数绝对没有任何本质上特定于服务器或客户端的内容，即与客户端和服务器端无关。简而言之，我想简单地做这样的事情

const preferenceType = 'MOBILE_FEATURES'
const {appPreferences} = useApplicationPreferences()
const mobilePreferences = appPreferences(preferenceType)

console.log('Mobile feature make is ', mobilePreferences.make))

我可以在客户端上运行它，但我不知道如何在服务器上实现相同的功能。我尝试过这个设置：

运行时/use-preferences.ts

runtime/server/user-preferences-server // 使用相同的代码

首选项是动态的，因此我无法将它们添加为我的 nuxt.config.ts 中的运行时配置。应用程序可以根据用户选择来设置它们，并在 user-preferences.ts 可组合项中设置它们。

这是 module.ts 的代码。客户端代码是我无法显示的代码。

     import { defineNuxtModule, createResolver, useLogger, addImportsDir, addTemplate } from '@nuxt/kit';
     import defu from 'defu';
     import { fileURLToPath } from 'url';



    export interface BasePreferences {
     deviceName?: string;
  
    }

    export interface ModuleOptions {
     basicOptions?: BasePreferences;
    }

   export default defineNuxtModule({
     meta: {
     name: 'userPreferences',
     configKey: 'userPreferencesConfig',
   },
    defaults: {
      basicOptions: {
       deviceName: 'test',
     },
   },
      setup(moduleOptions, nuxt) {
      const userPreferences = userPreferences();
      const resolver = createResolver(import.meta.url);
      const nuxtOptions = nuxt.options;

      const mergedOptions = defu(
        nuxtOptions.runtimeConfig.public.userPreferencesConfig || {},
        moduleOptions
      );

      nuxtOptions.runtimeConfig.public.userPreferencesConfig = mergedOptions;


      const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
      nuxt.options.build.transpile.push(runtimeDir)
      nuxt.options.build.transpile.push("user-preferences.js");
      nuxt.options.build.transpile.push("user-preferences-server.js");

   

        nuxt.hook('nitro:config', (nitroConfig) => {
        nitroConfig.alias = nitroConfig.alias || {}
       // Inline module runtime in Nitro bundle
        nitroConfig.externals = defu(typeof nitroConfig.externals === 'object' ? 
      nitroConfig.externals : {}, {
        inline: [resolver.resolve('./runtime/server')]
      })
      nitroConfig.alias['#user-preferences'] = resolver.resolve(runtimeDir, 
    './runtime/server')
     })
     
      addTemplate({
       filename: 'types/user-preferences.d.ts',
        getContents: () => [
         'declare module \'#user-preferences\' {',
         `  const usePreferences: typeof 
      import('${resolver.resolve('./runtime/server')}').UserPreferences`,
        '}'
         ].join('\n')
      })

    nuxt.hook('prepare:types', (options) => {
      options.references.push({ path: resolver.resolve(nuxt.options.buildDir, 'types/user- 
     preferences.d.ts') })
    })
      addImportsDir(resolver.resolve('./runtime'));

      },
   });

#user-preferences 的导入在 #imports 目录中显示为 ./src/... 我知道这是错误的，因为它无法在运行时从那里引用。我真的需要一些帮助来解决这个问题。我所有的代码都可以工作，除了我失去了如何在服务器端（即在 server/api 文件夹中）将其拉下来

Answer 1

我使用 addImports 使首选项可供应用程序两侧使用，并添加了 useApplicationPreferences 的服务端版本，然后像我为客户端所做的那样导入它。