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

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

所以我试着听shopify:section:select事件。但是函数remountVueApp总是显示旧的{{section.settings.button_color}}值。因此，我不知道如何将更新后的值从section.settings传递到Vue应用程序。怎样才能做到呢

当我按下Save按钮时，可以保存区段设置并显示新按钮颜色

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

---

它认为你不需要向JS文件中添加任何液态代码，在液态代码的部分中使用它，一旦你更新了部分中的任何值，它就会自动更改。是的，我试图在标记中定义一个测试类。该类包括节设置。现在它起作用了。谢谢你知道它对你有用。

<!-- 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>