同一页面上使用相同代码库的多个 Vue 实例

Question

我正在致力于将 Vue.js 的功能引入 WordPress 生态系统，我的第一个项目是在页面上进行搜索和过滤。

因为主网站最初是由 WordPress 使用 PHP/HTML 渲染的，所以我在页面上初始化了 Vue，附加到我使用 WordPress 输出的 HTML 元素。这一切都工作得很好，但现在我试图通过拥有同一代码库的多个实例（可以一起工作）来更进一步

以 Indeed 为例（假设这是一个 WordPress 网站）：

因为整个输出不是在 Vue.js 中完成的，所以我必须从 WordPress 端输出多个 HTML DIV 元素，并在它们上初始化 Vue。

因为表单/字段将根据用户配置/设置动态生成，所以两个实例将使用相同的代码库......但我以某种方式需要使其能够协同工作，也就是说，更新结果在任何情况下，当选择或更改值时，都会在页面上显示。

这里的想法是在我的主 JS 文件中使用 vanilla javascript 来检测页面上存在的所有特定 HTML 元素（甚至可能为数据对象中的每个元素定义一个 slug），然后执行 foreach 循环来初始化new Vue()在每个实例上。

我的第一个想法是使用 Vuex 存储，将单个存储附加到所有实例，存储任何选定的值，并在其中任何一个发生更改时触发调度来更新列表。

以前有人做过类似的事情吗？这样做有什么我应该感到厌倦的吗？或者有人对如何做到这一点有更好的建议？

我认为我最好在这里提问，而不是通过艰难的方式学习，然后发现这可能是不可能的，或者这样做会出现问题。

任何建议、评论、批评或想法都将不胜感激

更新 有一个建议，将 Vue 实例绑定到主体，删除该render函数，然后在需要的地方输出组件 HTML 元素（而不是输出 div 然后附加到它）。想要对此进行测试，但对围绕此的想法感到好奇？

Answer 1

对于遇到此问题的任何人，我最终只是初始化了 Vue 实例，如下所示：

const sections = document.getElementsByClassName( "my-wrapper" )

for ( var i = 0; i < sections.length; i ++ ) {
    new Vue( {
         el: '#' + sections[ i ].id,
         store
     })
}

基本上是在页面上找到的每个输出上初始化新的 Vue 实例，并将共享存储传递给每个输出。