如何为Frappe JS SDK创建Nuxt 3插件/组合式函数

你可以通过组合式函数或Nuxt插件两种方式封装重复的初始化代码，以下是具体实现步骤：

方案一：封装为组合式函数 #

适合按需引入的场景，匹配你已有组合式函数的使用经验：

1. 在项目根目录的composables文件夹下创建文件useFrappe.js（使用TypeScript则创建.ts后缀文件），写入代码：

// composables/useFrappe.js
import { FrappeApp } from "frappe-js-sdk";

export const useFrappe = () => {
  const runTimeConfig = useRuntimeConfig();
  const frappe = new FrappeApp(runTimeConfig.apiBase, {
    useToken: true,
    token: () => runTimeConfig.apiSecret,
    type: "token",
  });

  const db = frappe.db();
  return { frappe, db };
};

2. 在页面或组件中直接调用使用：

// 页面的<script setup>
const { db } = useFrappe();
const notes = await db.getDocList("Note", { fields: ["name", "content"] });

方案二：封装为Nuxt插件 #

适合全局复用的场景，无需每次手动调用组合式函数：

1. 在项目根目录的plugins文件夹下创建文件frappe.js，写入代码：

// plugins/frappe.js
import { FrappeApp } from "frappe-js-sdk";

export default defineNuxtPlugin((nuxtApp) => {
  const runTimeConfig = useRuntimeConfig();
  const frappe = new FrappeApp(runTimeConfig.apiBase, {
    useToken: true,
    token: () => runTimeConfig.apiSecret,
    type: "token",
  });

  const db = frappe.db();

  // 将实例注入全局，通过useNuxtApp即可获取
  return {
    provide: {
      frappe,
      frappeDb: db
    }
  };
});

2. 在页面或组件中使用全局注入的实例：

// 页面的<script setup>
const { $frappeDb } = useNuxtApp();
const notes = await $frappeDb.getDocList("Note", { fields: ["name", "content"] });

补充：Frappe JS SDK核心说明（翻译自官方文档） #

Frappe JS SDK用于在Node.js应用或无服务器函数中与Frappe框架搭建的服务交互，核心能力包括：

• 数据库操作：支持获取文档列表、创建/更新/删除文档等CRUD操作
• API调用：可直接调用Frappe后台的自定义API方法
• 认证机制：支持令牌认证、会话认证多种方式，适配不同场景需求

内容的提问来源于stack exchange，提问作者Azhar Umar