2

我正在使用实例属性构建一个 VueJS 插件，我需要将一些反应值带回 VueJS。

我的搜索：

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

简单的例子：

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

4

1 回答 1

4

好的，通过挖掘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)
于 2018-02-09T11:40:15.330 回答