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

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

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

以这个示例截图为例(假设这是一个 WordPress 网站):

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

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

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

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

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

认为我最好在这里提问,而不是通过艰苦的学习,然后发现它可能是不可能的,或者这样做会有问题。

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

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

解答

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

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

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

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