Shopify 主题编辑器 + Vue3.x：如何将新的部分设置值传递给 Vue 应用程序？

问题描述

我正在尝试将 Vue3.x 与 Shopify 主题编辑器集成。现在我可以让 Vue 应用程序在主题编辑器中工作。但是，当我尝试更改部分中的“添加到捆绑包”按钮颜色时，无法立即更新按钮颜色。

所以我尝试收听 shopify:section:select 事件。但是函数 remountVueApp() 总是显示旧的 {{ section.settings.button_color }} 值。所以我不知道如何将更新的值从 section.settings 传递给 Vue 应用程序。怎么办？

当我按下保存按钮时，可以保存部分设置并显示新的按钮颜色。

屏幕截图显示了我在主题编辑器中更改按钮颜色后的调试消息

<!-- This will only render in the theme editor -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<script>
  function remountVueApp() {
    console.log('listen to shopify theme editor re-render. Render app to respond to DOM update');
    vueApp = createMyApp();
    console.log('button_color 2 = {{ section.settings.button_color }}');
    buttonColor = '{{ section.settings.button_color }}';
             
    vueApp.component('product-card',productCard) 
    vm = vueApp.mount('#byobApp') 
  }

  const emitter = window.mitt();
  emitter.on('shopify:section:select',remountVueApp);

  const themeEventHandler = (event) => {
    console.log(event.detail.load)
    if (event.detail.load) {
      // emit a generic version
      console.log('button_color 1 = {{ section.settings.button_color }}');
      emitter.emit(`${event.type}`,event);
    }
  };

  // these are custom events emitted by the Shopify section editor
  // we are hooking them up to our Vue event dispatcher
  document.addEventListener('shopify:section:select',themeEventHandler);  
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

shopify shopify shopify-template vuejs3