Shopware PWA 中调用自定义 Store API 路由的完整实践指南-php教程-PHP中文网

Shopware PWA 中调用自定义 Store API 路由的完整实践指南

在 Shopware PWA（Vue Storefront）中，可通过 shopware-6-client 提供的 invokeGet/invokePost 方法安全、便捷地调用自定义 Store API 路由，无需手动拼接完整 URL 或管理认证头。

在 shopware pwa（vue storefront）中，可通过 `shopware-6-client` 提供的 `invokeget`/`invokepost` 方法安全、便捷地调用自定义 store api 路由，无需手动拼接完整 url 或管理认证头。

要在 Vue Storefront（Shopware PWA）中成功调用你在 Shopware 6 插件中注册的自定义 Store API 路由（如 /store-api/my-custom-endpoint），推荐使用官方封装的 shopware-6-client 工具方法，而非直接使用裸 axios。这能自动注入必要的认证凭据（如 sw-access-key）、上下文令牌（sw-context-token）及请求头，确保与 Shopware 后端无缝通信。

✅ 正确调用方式：使用 `invokeGet`

假设你的自定义路由已正确注册为 GET /store-api/my-custom-endpoint（例如返回静态文本数组），你可在 Nuxt 页面组件（如 src/pages/MyCustomPage.vue）中这样调用：

<template><div>
    <h1>My Custom Data</h1>
    <pre class="brush:php;toolbar:false;" v-if="data">{{ JSON.stringify(data, null, 2) }}

? 关键说明：invokeGet('/my-custom-endpoint') 中的路径是相对路径，框架会自动补全为 https://your-shop.com/store-api/my-custom-endpoint，并附带正确的 sw-access-key（来自 SW_ACCESS_KEY 环境变量）和当前上下文 token。

Skill Weave Chains — 技能链路由引擎
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

⚠️ 注意事项

路径规范：invokeGet/invokePost 接收的路径不包含 /store-api 前缀，仅需 /your-route-suffix；
环境变量校验：确保 .env 文件中已配置 SW_ACCESS_KEY=your_plugin_access_key（该 key 需与 Shopware 后端插件中注册的 store-api scope access key 一致）；
Token 自动同步：若页面涉及用户上下文（如登录态），invoke* 方法会自动携带最新 sw-context-token（由 useSessionContext 等组合式 API 维护）；
错误处理：务必捕获异常，Shopware 自定义路由返回非 2xx 状态码时将抛出 ShopwareApiError，可统一处理权限或参数错误；

避免裸 axios：若执意使用 axios，必须手动添加：

headers: {
  'sw-access-key': import.meta.env.VUE_APP_SW_ACCESS_KEY,
  'sw-context-token': getContextToken() // 需自行从 useSessionContext 获取
}

易出错且重复造轮子，不推荐。

✅ 总结

调用自定义 Store API 的最佳实践就是：注册路由 → 创建 Nuxt 页面 → 使用 invokeGet/invokePost → 专注业务逻辑。Vue Storefront 的客户端 SDK 已为你抽象了所有底层集成细节，让前端开发回归简洁与可靠。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！

Shopware PWA 中调用自定义 Store API 路由的完整实践指南

✅ 正确调用方式：使用 invokeGet

⚠️ 注意事项

✅ 总结

✅ 正确调用方式：使用 `invokeGet`