Nuxt3中使用MailChimp添加列表成员时出现函数不存在错误

问题场景 #

在Vue3/Nuxt3项目中使用MailChimp Marketing API添加列表成员，编写了如下插件：

import MailchimpMarketing from '@mailchimp/mailchimp_marketing'

MailchimpMarketing.setConfig({
    apiKey: '**************',
    server: '****',
})

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.provide('mailchimp', {
        $addListMember: MailchimpMarketing.lists.addListMember,
    })
})

在组件中调用的代码：

<script setup>
const { $mailchimp } = useNuxtApp()
const handleSubmit = (event) => {
    const listId = '*******'
    const myForm = event.target
    const formData = new FormData(myForm)

    const run = async () => {
        const response = await $mailchimp.$addListMember(listId, {
            email_address: formData.get('email'),
            status: 'pending',
        })
        console.log(response)
    }

    run();
}
</script>

错误信息 #

运行后抛出以下错误：

ListsApi.js:3947 Uncaught (in promise) TypeError: this.addListMemberWithHttpInfo is not a function
    at Object.addListMember [as $addListMember] (ListsApi.js:3947:17)
    at run (GlobalFooter.vue:339:1)
    at handleSubmit (GlobalFooter.vue:346:1)
    at chunk-OE4IQ2AX.js?v=69d090bb:9148:1
    at callWithErrorHandling (chunk-OE4IQ2AX.js?v=69d090bb:1557:1)
    at callWithAsyncErrorHandling (chunk-OE4IQ2AX.js?v=69d090bb:1565:1)
    at HTMLFormElement.invoker (chunk-OE4IQ2AX.js?v=69d090bb:8175:1)

解决方案 #

问题根源

直接提取addListMember方法时，丢失了该方法所属的lists实例上下文，导致内部无法访问addListMemberWithHttpInfo等依赖方法。

修复方案1：绑定方法上下文

修改插件代码，将addListMember方法的this绑定到lists实例：

import MailchimpMarketing from '@mailchimp/mailchimp_marketing'

MailchimpMarketing.setConfig({
    apiKey: '**************',
    server: '****',
})

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.provide('mailchimp', {
        $addListMember: MailchimpMarketing.lists.addListMember.bind(MailchimpMarketing.lists)
    })
})

组件中的调用代码无需修改，保持原样即可。

修复方案2：包装调用函数

通过包装函数封装API调用，确保上下文正确：

import MailchimpMarketing from '@mailchimp/mailchimp_marketing'

MailchimpMarketing.setConfig({
    apiKey: '**************',
    server: '****',
})

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.provide('mailchimp', {
        $addListMember: async (listId, memberData) => {
            return await MailchimpMarketing.lists.addListMember(listId, memberData)
        }
    })
})

此方案同样无需修改组件内的调用逻辑。

额外注意事项

• 敏感信息（API密钥、服务器前缀）不要硬编码，建议存放在Nuxt3的环境变量中（如.env文件），通过process.env.MAILCHIMP_API_KEY这类方式获取。
• 确保列表IDlistId配置正确，并且API密钥拥有操作该列表的权限。

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