VueJS делает свойство экземпляра реактивным

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

Мои поиски:

Я не понимаю, что стоит за Object.defineProperty(), я искал инициализация геттеров vuex поскольку моя логика похожа, но я не понимаю, как работать правильно.

Простой пример:

Ниже фрагмент VueJS, прикрепленный к его прототипу, main.js:

Vue.prototype.$ajax = {
  loading: false,
  isLoading () {
    return this.loading
  }
}

Теперь, обращаясь к нему из компонента, component.vue :

export default {
    computed: {
      loading () {
        return this.$ajax.isLoading()
      }
    },
    created () {
      let self = this

      setInterval(() => {
        console.log(this.loading, this.$ajax.isLoading())
      }, 100)

      setTimeout(() => {
        this.$ajax.loading = true
      }, 1000)
    }
  }
}

Пример результата:

До setTimeout у нас есть false false (это ожидаемый результат), а после setTimeout у нас есть false true (геттер не получает модификацию, но значение имеет прямой аксессор).

Есть идеи добавить немного реактивности в мой $ajax.isLoading() ?


javascript vue.js vuex vue-reactivity
person Ifnot    schedule 09.02.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Хорошо, копаясь в vuex коде, я нашел решение: используйте экземпляр Vue внутри плагина с вашими данными, чтобы вывести реактивность наружу.

Из вопроса:

Vue.prototype.$ajax = {
  _vm: new Vue({data: {
    loading: false
  }}),
  setLoading (loading) {
    this._vm.$data.loading = loading
  },
  isLoading () {
    return this._vm.$data.loading
  }
}

И я только что изменил прямой метод доступа с помощью этого сеттера на моем компоненте:

this.$ajax.setLoading(true)
person Ifnot    schedule 09.02.2018
comment
Спасибо, я тоже искал именно это решение, хотя выглядит довольно уродливо... - person László Kenéz; 10.04.2018
comment
Нет, это имеет смысл. Нам нужен реактивный держатель данных, если наши данные находятся за пределами VueJs. Кроме того, экземпляр VueJ очень легкий, поэтому мы можем создать столько экземпляров VueJ, сколько захотим для такого использования. - person Ifnot; 11.04.2018
comment
Неплохо, хотя Vue.observable — это более чистый способ сделать это. - person Dan; 11.11.2020