Javascript 观察者是否在Vue中使用全局混合器？

我已经搜索了Vue文档，除非我是盲人，否则我看不到任何说明不能在子组件到父组件或全局mixin属性的子组件上使用观察者的内容。然而，由于某种原因，我不能让我的工作

我有一个全局混合器，用于锁定/解锁滚动窗口。非常简单，我正在尝试侦听子组件对全局mixin的

bodyLocked

布尔属性的更改

出于某种原因，观察者确实会在页面加载时启动，但在加载之后，它似乎不会监听更改

这是我的mixin（它与

Vue.mixin（）

一起全局使用）：

下面是一个示例子组件：

export default {

    watch: {

        bodyLocked: function(locked) {

            console.log('locked: ' + locked);

        }

    }

}

---

监视程序用于监视同一组件中的计算属性和状态属性。组件基本上是一个带有闭包的对象，因此您想要的东西无法工作

来自

mixin是一种灵活的方式来为用户分发可重用的功能 Vue组件。mixin对象可以包含任何组件选项。什么时候 组件使用mixin时，mixin中的所有选项都将“混合” 进入组件自己的选项

---

声明全局混合后，应用程序中的每个Vue组件都将有自己的数据

锁定

，使用两种方法

\u lockBody

和

\u unlockBody

修改自己的

锁定

值。我相信您期望在全局mixin中声明的值在组件之间共享，但事实并非如此。您需要的可能是全局状态管理：

当您使用全局混合时，组件将不会共享相同的

bodyLocked

数据实例。因此，在一个组件中更改它不会在其他组件中更改它。每个组件都有自己的

锁体
值

另一种方法是在Vue原型上共享一个对象，而不是使用全局混合。这样的对象将在所有组件实例之间共享。它还可以在组件中提供更清晰的名称空间，并且应该比全局混合对性能的影响更小


const locker=Vue.observable({
锁定：错误，
锁（）{
locker.locked=true；
document.documentElement.classList.add（'no-scroll'）；
},
解锁（）{
locker.locked=false；
document.documentElement.classList.remove（'no-scroll'）；
}
});
Vue.prototype.$bodyLocker=locker；
新Vue({
el:“#应用程序”，
观察：{
“$bodyLocker.locked”（已锁定）{
log（'watcher fired:'+locked）；
}
}
});
。无滚动{
背景色：#f00；
}

锁
解锁
是的，当我在mixin上的
mounted
钩子中添加
console.log（'mounted'）
时，我意识到了这一点，它被多次发射。。。我对使用状态管理犹豫不决，因为我觉得对于这个特定用例来说可能有点过火。你认为呢？这很有趣，而且正是我想要的解决方案。。。是否有关于
可观察的
的文档？i、 我们使用它是否受到Vue的限制？另外，当您在那里时，您是否知道为什么我不能使用
\u locked
作为属性名？我以前用过这个，观察家没有开火，但是当我删除下划线时，它工作得非常好。。。我在文档中找不到任何关于属性名称中不允许使用下划线的内容可见文档：。这里解释了为什么不能在
数据中使用
\uuu
或
$
作为前缀：。也请阅读这里的详细说明部分：更多关于这些前缀的使用。太棒了，谢谢。如果我能让它正常工作，我将对此进行讨论并接受答案。您确定可以将函数放在Vue可观察中吗？我假设我只是像这样调用这些函数：
this.$bodyLocker.lock（）
？还有，有没有办法把某种手表放到其他可观察对象中？理想情况下，我希望
查看
locker.locked
值，然后在更改该值时更新
no scroll
类。换句话说，
lock（）
将只是
locker.locked=true
，然后观察者将更新必要的类。。。它看起来比在每个函数中更新类和属性更干净。如果这不清楚，我可以更新我的问题。。。
export default {

    watch: {

        bodyLocked: function(locked) {

            console.log('locked: ' + locked);

        }

    }

}