插件的 VueJS 反应式绑定 - 如何？

我正在为 Pouch/CouchDB 开发一个 Vue 插件，该插件将是开源的，但只要我能找出我遇到的问题：

目前，我正在尝试使该插件非常类似于 Vuex，它具有内部状态，并检测更改，并在发生更改时渲染视图。

在 Vue 实例中，我正在初始化一个对象，在该对象中，我尝试使用 DefineReactive 使两个或三个对象具有反应性，直到这里为止。

但是当我尝试更改该对象内的某些值时，更改不会传播到视图。但是如果我明确地打电话this.$bucket._state.projects.__ob__.dep.notify()，变化传播。

Vue 实例的当前对象表示如下：Vue { $bucket: { _state: { projects: {} } } }

$bucket._state已初始化为defineReactive。我相信它应该有效，但我不确定这种情况下的确切问题是什么。

任何想法？

部分代码，这里的类几乎类似于Vuex.Store({})

    constructor(schema = {}) {

    // Getting defineReactive from Vue
    const { defineReactive } = Vue.util;

    // Ignored Schema Keys
    const ignoredKeys = [
      'config',
      'plugins'
    ];

    // Internal Variables
    this._dbs = {};

    // Define Reactive Objects
    defineReactive(this, '_state', {});
    defineReactive(this, '_views', {});

    // Local Variables
    if (!schema.config) {
      throw new Error(`[Pouch Bucket]: Config is not declared in the upper level!`);
    }

    // Init PouchDB plugins
    if ((schema.plugins.constructor === Array) && (schema.plugins.length > 0)) {
      for (let i = 0; i < schema.plugins.length; i++) {
        PouchDB.plugin(
          schema.plugins[i]
        );
      }
    }

    // Initializing DBs that are declared in the schema{}
    for (const dbname in schema) {
      if (schema.hasOwnProperty(dbname) && ignoredKeys.indexOf(dbname) === -1) {
        this._initDB(
          dbname,
          Object.assign(
            schema.config,
            schema[dbname].config ? schema[dbname].config : {}
          )
        );

        this._initState(dbname);
      }
    }
  }

我认为你不需要使用这些内部 API，比如Vue.util.defineReactive or this.$bucket._state.projects.__ob__.dep.notify()

由于 Vue 本身是响应式的，因此您可以使用 Vue 实例来存储数据。无需重新发明反应系统。

在构造函数中创建一个 Vue 实例：

this.storeVM = new Vue({ data })

并使用 getter 来委托.state to storeVM.$data

get state () {
  return this.storeVM.$data
}

所以当你访问myPlugin.state，您正在访问 Vue 实例的数据。

我创建了一个非常简单的反应式插件示例：http://codepen.io/CodinCat/pen/GrmLmG?editors=1010 http://codepen.io/CodinCat/pen/GrmLmG?editors=1010

无需使用defineReactive或者如果 Vue 实例可以为您做所有事情，请您自己通知依赖项。事实上，Vuex 就是这样工作的。