有没有什么办法让多个Vues有一个计算的侦听器在相同的值上工作？

设置：有没有什么办法让多个Vues有一个计算的侦听器在相同的值上工作？

我有多个Vue的组件，并且每个组件都有在我的web应用程序不同的对话框多个实例。

对于每种类型的组件我都有一个全局状态（handrailOptions在下面的例子中），以便每种类型的组件在对话框中保持同步。

我想这样做，当组件进行超出第1步，我隐藏在该对话框中的其他组件。

我用计算器/手表组合很好地实现了这个。

但是，我的问题是，如果我尝试通过超过1个Vue实例进行计算侦听，它会劫持其他侦听器。

问题

下面就是我的工作，当应用程序启动时的简化版本，控制台登录“计算机1” &“计算2”。但当我改变handrailOptions.step时，只有第二次火灾。（'计算2'&'看了2'）

有没有办法让多个Vues有一个计算出来的监听器在同一个值上工作？

handrailOptions = { 
    step: 1 
}; 

Vue.component('handrail-options', { 
    template: '#module-handrail-options', 
    data: function() { 
     return handrailOptions; 
    }, 
}); 

var checkoutDialog = new Vue({ 
    el: '#dialog-checkout', 
    computed: { 
     newHandrailStep() { 
      console.log('computed 1'); 
      return handrailOptions.step; 
     } 
    }, 
    watch: { 
     newHandrailStep(test) { 
      console.log('watched 1'); 
     } 
    } 
}); 

new Vue({ 
    el: '#dialog-estimate-questions', 
    computed: { 
     newHandrailStep() { 
      console.log('computed 2'); 
      return handrailOptions.step; 
     } 
    }, 
    watch: { 
     newHandrailStep(test) { 
      console.log('watched 2'); 
     } 
    } 
});

来源

2017-08-02 Andrew Rockwell

是什么'handrailOptions'？什么是'newHandrailStep'？ –

假设'handrailOptions'是一个全局变量，并且它的数据绑定在data.handrailOptions.step而不是'data.handrailOptions'我明白你的问题。因为vue无法绑定到对象引用，所以它绑定到该值，因此无法更新其他实例。尝试绑定对象，而不是数据段中的对象属性=>'data：{handrailOptions：handrailOptions}' – Reiner

@RoyJ'handrailOptions'是我提到的全局状态，我编辑了我的答案，将它添加到代码中。 'newHandrailStep'是为'handrailOptions.step'计算的变量，以便我可以在vue实例中观看它。 –

这个按预期工作。我通过创建新的Vue的数据对象来响应handrailOptions。使它成为组件的数据对象，就像你做的那样，也可以工作，但组件必须至少被实例化一次。无论如何，为您的全球范围提供一个单一对象更有意义。

handrailOptions = { 
 
    step: 1 
 
}; 
 

 
// Make it responsive 
 
new Vue({data: handrailOptions}); 
 

 
var checkoutDialog = new Vue({ 
 
    el: '#dialog-checkout', 
 
    computed: { 
 
    newHandrailStep() { 
 
     console.log('computed 1', handrailOptions.step); 
 
     return handrailOptions.step; 
 
    } 
 
    }, 
 
    watch: { 
 
    newHandrailStep(test) { 
 
     console.log('watched 1'); 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#dialog-estimate-questions', 
 
    computed: { 
 
    newHandrailStep() { 
 
     console.log('computed 2', handrailOptions.step); 
 
     return handrailOptions.step; 
 
    } 
 
    }, 
 
    watch: { 
 
    newHandrailStep(test) { 
 
     console.log('watched 2'); 
 
    } 
 
    } 
 
}); 
 

 
setInterval(() => ++handrailOptions.step, 1500);

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="dialog-estimate-questions"> 
 
    Main step {{newHandrailStep}} 
 
</div> 
 
<div id="dialog-checkout"> 
 
    CD step {{newHandrailStep}} 
 
</div>

来源

2017-08-03 13:40:50

有没有什么办法让多个Vues有一个计算的侦听器在相同的值上工作？

回答

相关问题