Javascript 有没有办法让多个VUE的计算侦听器处理相同的值？

设置：

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

对于每种类型的组件，我都有一个全局状态（

handrailOptions

，在下面的示例中），以便每种类型的组件在对话框中保持同步

我希望这样，当一个组件超过步骤1时，我会在该对话框中隐藏其他组件

我使用computed/watch组合很好地实现了这一点

但是，我的问题是，如果我尝试通过多个Vue实例使用computed进行侦听，它会劫持其他侦听器

问题

下面是我正在使用的一个简化版本，当应用程序启动时，控制台会记录“computed 1”和“computed 2”。但是当我改变扶手选项时，只有第二步触发。（“计算2”和“监视2”）

有没有办法让多个VUE的计算侦听器处理相同的值

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');
        }
    }
});

---

这正如预期的那样有效。我通过创建新的

Vue

的数据对象，使

handrailOptions

响应。将其作为组件的数据对象（如您所做的）也可以工作，但组件必须至少实例化一次。无论如何，对于全局对象，使用单个对象更有意义

handlailoptions={
步骤：1
};
//让它反应灵敏
新的Vue（{data:handrailOptions}）；
var checkoutDialog=新建Vue({
el:“#对话框签出”，
计算：{
newHandrailStep（）{
log（'computed 1'，handrailOptions.step）；
返回handrailOptions.step；
}
},
观察：{
newHandrailStep（测试）{
console.log（'1'）；
}
}
});
新Vue({
el:“#对话评估问题”，
计算：{
newHandrailStep（）{
log（'computed 2'，handrailOptions.step）；
返回handrailOptions.step；
}
},
观察：{
newHandrailStep（测试）{
console.log（'2'）；
}
}
});
setInterval（（）=>++handrailOptions.step，1500）

主步骤{{newHandrailStep}
CD步骤{{newHandrailStep}
什么是
扶手选项
？什么是
newHandrailStep
？假设
handrailOptions
是一个全局变量，它与
data.handrailOptions.step
绑定在数据中，而不是
data.handrailOptions
我理解您的问题。由于vue无法绑定到对象引用，因此它绑定到该值，因此无法更新其他实例。尝试绑定对象，而不是数据部分=>
数据中的对象属性：{handrailOptions:handrailOptions}
@RoyJ
handrailOptions
是我提到的全局状态，我编辑了答案，将其添加到代码中
newHandrailStep
是为
handrailOptions计算的变量。step
这样我就可以在vue实例中查看它了。@Reiner我想可能有误解吧？我将整个对象绑定到组件的数据。但我希望每个Vue实例都观察属性
步骤
的变化。这对于1个Vue很好，但每当我添加另一个Vue时，只有最新的Vue才会在
handlailoptions.step
更改时启动监视功能。（我试图查看整个
handrailOptions
对象，但没有效果）您是否创建了
扶手选项
组件的实例？Vue不会让
handrailOptions
做出响应，除非您这样做。（我想这就是你设置它的原因。）我可能只需要做
newvue（{data:handrailOptions}）