Как сделать реактивное глобальное свойство в плагине vuejs?

Я поместил $testCounter в плагин, чтобы сделать его глобальным:

Vue.use({
  install(Vue) {
    Vue.prototype.$testCounter = 0;
    Vue.prototype.$incrementCounter = () => {
      Vue.prototype.$testCounter++;
    };
});

Я хочу вывести его в какой-то компонент. Мне также нужно, чтобы его значение обновлялось глобально и реактивно:

<template>
  <p>{{ $testCounter }}</p>
</template>

<script>
  mounted() {
    let comp = this;
    comp.watcherId = setInterval(() => {
      comp.$incrementCounter();

      // I want to remove this line and still be reactive :
      comp.$forceUpdate();

    }, 1000);
  }
</script>

Мне нужно, чтобы свойство было реактивным, я пробовал несколько решений в качестве наблюдателей, вычисляемых реквизитов, vm.$set(...), но я не могу найти правильный способ сделать это.


vuejs2 vue-component vue-reactivity
person Vincent Wasteels    schedule 04.06.2018    source источник
comment
вы могли бы использовать Vuex?   -  person Jacob Goh    schedule 04.06.2018
comment
Я пока не планирую его использовать, я не устанавливаю слишком много слоев для базовых приложений.   -  person Vincent Wasteels    schedule 04.06.2018

Ответы (1)


arrow_upward
7
arrow_downward

Решение 1: используйте Vuex

Решение 2: задайте глобальные реактивные данные в корневом компоненте и используйте их, вызвав this.$root

демо: https://jsfiddle.net/jacobgoh101/mdt4673d/2/

HTML

<div id="app">
  <test1>
      {{$root.testCounter}}

  </test1>
</div>

Javascript

Vue.component('test1', {
    template: `
  <div>
  test1
  <slot></slot>
  </div>
  `,
    mounted() {
        setInterval(() => {
            this.$root.incrementCounter();
        }, 1000)
    }
});

new Vue({
    el: "#app",
    data: {
        testCounter: 1
    },
    methods: {
        incrementCounter: function() {
            this.testCounter++;
        }
    }
})
person Jacob Goh    schedule 04.06.2018
comment
приведенный вами пример определяет глобальные реквизиты не для прототипа, а для данных самого приложения. это совсем другой случай. глобальные реквизиты, определенные в прототипе, действительно не являются реактивными. - person Dominik; 20.08.2020
comment
Vuex для победы - person victor hugo; 10.01.2021