Как посмотреть свойство объекта в Vue Plugin - PullRequest
Новая
       9

Как посмотреть свойство объекта в Vue Plugin

1 голос
/ 07 октября 2019

Фон

Рассмотрим следующий, очень простой плагин: 

import SomeObject from "./SomeObject";

/**
 * Some Cool Plugin...
 */
export default {
    install(Vue){

        Vue.prototype.$someObject = Vue.observable(SomeObject);

    }
}

Цель вышеизложенного состоит в том, чтобы зарегистрировать объект, который будет реагировать во всем приложении.

Проблема и вопрос

Vue.prototype.$someObject содержит определенные свойства, которые должны быть watched на глобальном уровне, а не на уровне компонента.

Есть ли способ присоединить наблюдатель кэкземпляр Vue в методе install плагина Vue?

Обратите внимание, я не ищу следующий ответ, я уже знаю, что это можно сделать, но он побеждаетточка разделения кода в плагин. Глобального миксина также было бы недостаточно ... 

watch: {

    '$someObject.foo': {
        handler(value) {
            console.log(value);
        }
    }

}

То, что я попробовал

Основываясь на документации, изложенной здесь , я предположил, что могу что-то сделать вместестроки следующие: 

export default {
    install(Vue){

        Vue.prototype.$someObject = Vue.observable(SomeObject);

        // I have tried all of the following:
        Vue.watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
        Vue.$watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
        Vue.prototype.watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
        Vue.prototype.$watch(Vue.prototype.$someObject.foo, value => { console.log(value) });

        Vue.watch(Vue.$someObject.foo, value => { console.log(value) });
        Vue.$watch(Vue.$someObject.foo, value => { console.log(value) });
        Vue.prototype.watch(Vue.$someObject.foo, value => { console.log(value) });
        Vue.prototype.$watch(Vue.$someObject.foo, value => { console.log(value) });

    }
}

1 Ответ

2 голосов
/ 07 октября 2019

В Vue 2 только экземпляры Vue предоставляют watch. Когда появится Vue 3, у вас будут другие варианты, но сейчас вы застряли с использованием экземпляра Vue.

Тем не менее, вы можете иметь экземпляр в плагине, так что это должно быть достаточно легко для достижения того, чтоВы хотите: 

import Vue from 'vue';
import SomeObject from './SomeObject';

/**
 * Some Cool Plugin...
 */
export default {
    install (Vue) {
        Vue.prototype.$someObject = Vue.observable(SomeObject);

        new Vue({
          watch: {
            '$someObject.foo' () {
              // Do something
            }
          }
        })
    }
}

Созданный здесь экземпляр Vue не отображается. Он существует исключительно для того, чтобы дать нам возможность наблюдать за $someObject.

Я знаю, что вы исключили это в вопросе, но я не совсем понимаю, почему. Возможно, вы не предусмотрели создание выделенного экземпляра Vue специально для наблюдения?

Альтернативой может быть использование установщиков свойств вместо watch. Идея состоит в том, чтобы использовать Object.defineProperty для создания установщика для свойств, которые вы хотите «наблюдать», а затем поместить любые побочные эффекты, которые вам нужны, в установщик.

...