javascript - VueJS 使实例属性具有反应性

Question

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

我的搜索:

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

简单示例:

在附加到其原型(prototype)的 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 code>(getter 不接收修改，但直接访问器有值)。

有什么想法可以将一些 react 性内容引入我的 $ajax.isLoading() 吗？

Answer 1

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

来自问题:

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)