VueJS 使实例属性具有反应性

Question

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

我的搜索：

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

简单示例：

在附加到他的原型的 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（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)

VueJS 使实例属性具有反应性

VueJS make instance property reactive

javascript

vue.js

vuex

vue-reactivity

VueJS 使实例 属性 具有反应性

VueJS make instance property reactive

javascript

vue.js

vuex

vue-reactivity

VueJS 使实例属性具有反应性