Question

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

我的搜索：

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

简单示例：

在他的原型main.js附近的VueJS代码段下面：

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没有收到修改，但直接accesor有值）。

有任何想法可以将一些反应性内容带入我的$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使实例属性具有反应性

1 个答案: