javascript - 观察者是否与 Vue 中的全局混合一起工作？

Question

我已经搜索了 Vue 文档，除非我是盲人，否则我看不到任何声明观察者不能用于父组件的子组件，或者在我的情况下，不能用于全局混合属性。但是，出于某种原因，我无法让我的工作......

我有一个用于锁定/解锁窗口滚动的全局混合。非常简单，我正在尝试监听子组件对全局混合的 bodyLocked bool 属性的更改。

出于某种原因，观察者确实在页面加载时触发，但在那之后，它似乎并没有在监听变化。

这是我的 mixin(它在全局范围内与 Vue.mixin() 一起使用):

export default {

    data() {
        return {
            bodyLocked: false
        }
    },

    methods: {

        /**
         * Lock the DOM body to disable scrolling.
         *
         * @return void
         */
        _lockBody() {
            this.bodyLocked = true;
            document.documentElement.classList.add('no-scroll');
        },

        /**
         * Unlock the DOM body to enable scrolling.
         *
         * @return void
         */
        _unlockBody() {
            this.bodyLocked = false;
            document.documentElement.classList.remove('no-scroll');
        }

    }

};

这是一个示例子组件:

export default {

    watch: {

        bodyLocked: function(locked) {

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

        }

    }

}

Answer 1

当您使用全局混合时，组件不会共享相同的 bodyLocked 数据实例。因此，在一个组件中更改它不会在其他组件中更改它。每个组件都有自己的 bodyLocked 值。

另一种替代方法是在 Vue 原型(prototype)上共享一个对象，而不是使用全局混合。这样的对象将在所有组件实例之间共享。它还会在组件内提供更清晰的命名空间，并且应该比全局混合具有更低的性能影响。

const locker = Vue.observable({
  locked: false,
  
  lock () {
    locker.locked = true;
    document.documentElement.classList.add('no-scroll');  
  },
  
  unlock () {
    locker.locked = false;
    document.documentElement.classList.remove('no-scroll');
  }
});

Vue.prototype.$bodyLocker = locker;

new Vue({
  el: '#app',
  
  watch: {
    '$bodyLocker.locked' (locked) {
      console.log('watcher fired: ' + locked);
    }
  }
});

.no-scroll {
  background-color: #f00;
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <button @click="$bodyLocker.lock">Lock</button>
  <button @click="$bodyLocker.unlock">Unlock</button>
</div>