VueJS 使实例属性具有反应性

Question

我正在使用 instance properties 构建一个 VueJS 插件，我需要将一些反应值带回 VueJS。

我的搜索：

我不明白Object.defineProperty()背后的东西，我搜索了vuex getters initialisation，因为我的逻辑相似，但我不明白如何正确操作。

简单示例：

在附加到他的原型的 VueJS sn-p 下方，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（getter 没有收到修改，但直接访问者有值）。

有什么想法可以将一些反应性的东西带入我的$ajax.isLoading() 吗？

Answer 1

好的，通过挖掘vuex 代码，我找到了一个解决方案：在插件中使用 Vue 实例，将数据放入其中，以便将反应性带到外部。

来自问题：

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

我刚刚通过这个 setter 在我的组件上更改了直接访问器：

this.$ajax.setLoading(true)