有沒有什麼辦法讓多個Vues有一個計算的偵聽器在相同的值上工作？

Question

設置：

我有多個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'); 
     } 
    } 
}); 

Answer 1

這個按預期工作。我通過創建新的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>