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

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

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

举一个来自Really的屏幕截图（假设这是一个WordPress站点）：

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

由于表单/字段将根据用户配置/设置动态生成，因此两个实例将使用相同的代码库。。。但我需要设法使它们能够协同工作，也就是说，当在任何实例中选择或更改某个值时，更新页面上的结果

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

new Vue（）

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

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

我想我最好在这里继续问下去，而不是通过艰苦的学习，然后再发现这可能是不可能的，或者这样做会有问题

非常感谢您的任何建议、评论、批评或想法

更新

---

有一个建议是将Vue实例绑定到主体，删除

render

函数，然后在需要的地方输出组件HTML元素（而不是输出一个div然后附加到它）。我将对此进行测试，但对围绕这个问题的想法感到好奇？

我自己还没有完成这个多Vue实例设置，但我在几个地方读到Vue是为支持这个用例而设计的。请参见此处的示例：

Vuex非常适合具有多个组件的大型SPA，而您所建议的基本上是相同的，所有组件之间没有共享的根实例。这就是Vuex应用商店非常有用的地方，它可以使页面上的每个Vue组件与应用程序数据的单个“真实来源”保持同步

不过，我不确定我是否明白你问题的这一部分：

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

在Vuex存储中更新数据时，如果正确设置Vuex，将自动“反应式”更新DOM。除了修改存储的数据外，没有其他操作可执行

关于你的更新，也许会有用，但对我来说这似乎不是个好主意。这听起来与Vue通常的使用方式背道而驰，我不记得文档中有任何部分提到过这种设置

---

就像我说的，我对你提出的设计没有直接的经验，所以我可能错过了一些东西。我想我还是会分享的。

对于任何遇到这种情况的人，我最终只是像这样初始化Vue实例：

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

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

const sections=document.getElementsByClassName（“我的包装器”）
对于（变量i=0；i

---

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

这里要看的是事件总线。使用它，您可以让多个Vue实例（及其内部组件）相互通信。VUEX也可以做这项工作，但很多人会认为这是多余的，因为这不是SPA。