vue.js - 将 Shopify AppBridge 实例传递给各种 Nuxt / Vue 组件

Question

我正在尝试为每个商店（用户）初始化一次 Shopify AppBridge 实例（https://shopify.dev/tools/app-bridge），然后在整个应用程序中使用相同的实例来使用各种 AppBridge 功能。

我最初的想法是将 AppBridge 实例添加到 Vuex 商店中；但是从商店中检索 AppBridge 对象时，我无法调用它中的任何函数（与它是序列化对象有关吗？）。我需要在实例/对象中使用各种功能；所以这行不通。

那么，我执行以下操作的最佳方法是什么：

1. 应用程序加载
2. 中间件或函数运行，使用用户/商店的详细信息初始化 AppBridge
3. 加载其他页面，使用相同的 AppBridge 实例实现各种功能

我当前的设置是在每个页面/组件上重新创建一个新的 AppBridge 实例，但这会导致复杂性。

有任何想法吗？非常感激！

标签： vue.jsshopifynuxt.jsshopify-app