Vue Storefront 允许您在几分钟内搭建下一个电子商务网站。您可以从 Magento、Shopify、Commercetools 等各种平台中进行选择!

在本教程中,我想指导您完成添加自定义 API 方法以为您的电子商务创建新功能的过程。它将允许您拥有一个全新的端点扩展,可以发送一个新请求、一个 GraphQL 查询/突变,或者其他完全不同的东西。

对于本教程,我将使用 Vendure 集成,但您可以自由选择任何您想要的电子商务集成。所有这些集成的过程都是相同的,只是根据集成使用的 API 客户端(Apollo GraphQL 或 Axios REST)略有不同。

代码

首先,您需要在middleware.config.js文件中注册一个新的extension:

module.exports = {
  integrations: {
    vendure: {
      location: '@vue-storefront/vendure-api/server',
      configuration: {
        api: {
          uri: process.env.GRAPHQL_API,
          // to be used later with authentication
          tokenMethod: process.env.TOKEN_METHOD
        }
      },
      extensions: (extensions) => [
        ...extensions,
        {
          name: 'test',
          extendApiMethods: {
            testApiMethod: async ({ client, config }) => {
              const result = await client.query({ query: gql`
              query products {
                products {
                  items {
                    id
                    customFields
                  }
                }
              }
              `, fetchPolicy: 'no-cache' })
              console.log(result)
            }
          }
        }
      ]
    }
  }
};

进入全屏模式 退出全屏模式

让我们关注extensions中的部分,因为其他所有内容只是某个集成正常工作的默认值。

Extensions 将接受一个名为 extensions 的参数,重要的是在最终返回时返回一个扩展扩展名。否则,集成中的默认扩展可能会停止工作,因此请记住也将它们归还。接下来,我们可以看到一个新扩展的结构。让我们来看看它的更多细节:

{
  name: 'test',
  extendApiMethods: {
    testApiMethod: async ({ client, config }) => {
      const result = await client.query({ query: gql`
      query products {
        products {
          items {
            id
            customFields
          }
        }
      }
      `, fetchPolicy: 'no-cache' })
      console.log(result)
    }
  }
}

进入全屏模式 退出全屏模式

首先,我们需要命名我们的新扩展。建议给它一个唯一的名称(即fetch-multiple-products),但在这种情况下,我只是展示一个测试示例。接下来,我们将有一个extendApiMethods对象,其中每个属性都可以表示其自己的新的或扩展的 API 方法。每个 API 方法都可以访问已解构的客户端参数。然后可以使用此参数从前端非常轻松地调用某些请求、查询或突变。此示例显示如何使用自定义 API 方法从 GraphQL API 获取多个产品(Vendure 的新方法没有实现此查询 - 正在使用不同的查询获取产品)

然后,您可以在组件或页面中使用新创建的 API 方法,如下所示:

const { $vendure } = useVSFContext();

onSSR(async () => {
    await $vendure.api.testApiMethod()
});

进入全屏模式 退出全屏模式

如果一切正常,您应该在项目运行的控制台中看到产品查询的结果。

总结

做得好!您刚刚在 Vue Storefront 2 项目中实现了一个全新的 API 方法。这些知识将使您能够对其进行更多定制,以更好地满足您的业务需求。