Vue组件对插件的数据变化没有反应。

Question

我试图让一个组件对Vue插件中的数据变化做出反应。要做到这一点，当插件被实例化时，它在其构造函数中实例化一个Vue对象，就像这样。

this._vm = new Vue({
  data: {
    obj: null,
    status: false,
  },
  watch: {
    obj(val) {
      console.log('From inside the plugin, "obj" changed:', val);
    }
  }
})

在页面加载时，应用程序会检查 localStorage 的数据。obj 属性。如果是这种情况，在如上图所示创建Vue实例后，会给该属性分配一个对象，就像这样。this._vm.obj = {x: 1, y:2, z:3}. 这很好用，我在我的控制台中看到了以下内容。

15:55:37.346 Component mounted, "obj": Object { … }
15:55:37.350 From inside the plugin, "obj" changed: Object { … }

我甚至可以通过编程重置 this._vm.obj 到 null，控制台就会按照预期显示反应性。

16:11:48.722 From inside the plugin, "obj" changed: null
16:11:48.726 Component watch "status": false
16:11:48.727 Component watch "obj": null

但是，如果没有发现数据在 localStorage向服务器发出请求，并使用响应数据来更新 this._vm.obj. 用来做的方法和上面的一样（这确实是 this._vm.obj = {x: 1, y:2, z:3}). 插件中的观察者会做出反应(From inside the plugin, "obj" changed)，但不是组件...

如果有人能提供一个指针，那就太好了

一些片段: 组件中的观察者。

watch: {
  '$MyPlugin.status'(val) {
    console.log('Component watch "status":', val)
  },
  '$MyPlugin.obj'(val) {
    console.log('Component watch "obj":', val)
  }
},

插件类有获取器来访问数据。

get status() {
  return this._vm.status || false
}

get obj() {
  return this._vm.obj
}

Answer 1

回答了我自己的问题。问题仅仅是在某些情况下，我的插件类从它的构造函数中返回了一个void承诺--我没有想到会有什么影响。(事实证明 构造函数可以返回一些.)

下面是我的插件的 install 功能。当 instance 是一个无效的承诺，而不是一个MyPlugin对象，我试图从其他组件中观察的属性最初是 undefined 从而不被动。

export default (() => {

    return function install(Vue, options) {

        let instance = new MyPlugin(Vue, options);

        Object.defineProperties(Vue.prototype, {
            $MyPlugin: {
                get: function () {
                    return instance;
                }
            }
        });
    }
})();