Question

我正在开发一个Pouch / CouchDB的Vue插件，它将是开源的，但只要我能解决我遇到的问题：

目前我正在尝试使插件与Vuex紧密相似，具有内部状态，并检测更改，并在视图发生时呈现视图。

在Vue实例中我正在初始化一个对象，并且在该对象中我试图使用defineReactive使两个或三个对象反应，直到这里它是好的。

但是当我尝试更改该对象内的某些值时，更改不会传播到View。但是如果我明确地调用这个。$ 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);
      }
    }
  }

Answer 1

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

因为Vue本身是被动的，所以您可以使用Vue实例来存储数据。没有必要重新发明反应系统。

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

this.storeVM = new Vue({ data })

并使用getter将.state委托给storeVM.$data

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

因此，当您访问myPlugin.state时，您正在访问Vue实例的数据。

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

如果Vue实例可以为您完成所有操作，则无需使用defineReactive或自行通知依赖项。事实上，这就是Vuex的工作方式。

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

1 个答案: