VueJS Reactive Binding for Plugin - How To？

Question

私がオープンソース化されますポーチ/ CouchDBのためのVueプラグインに取り組んでいますが、限り、私は私が午前問題を把握することができますよう：、

を現在私はVuexに似ていると密接にプラグインを作るしようとしています内部状態を持ち、変更を検出し、発生時にビューをレンダリングします。

Vueインスタンス内では、オブジェクトを初期化しています。そのオブジェクト内で、ここまではdefineReactiveを使って2〜3個のオブジェクトを反応させようとしています。

しかし、そのオブジェクトの中のいくつかの値を変更しようとすると、変更はビューに伝播されません。しかし、私が明示的にと呼んだ場合、$ bucket._state.projects .__ ob __。dep.notify（）、変更が伝播します。 Vue { $bucket: { _state: { projects: {} } } }

$bucket._statedefineReactiveで初期化されています：

Vueのインスタンスの現在のオブジェクト表現は、このようなものです。私はそれがうまくいくはずだと信じていますが、私はこのケースで何が問題なのかよく分かりません。

コードの部分は、ここでのクラスは、私がこのような考えに深く潜るなかった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インスタンスを使用してデータを保存できます。反応システムを再開発する必要はありません。

コンストラクタでインスタンスを作成します。

this.storeVM = new Vue({ data }) 

、あなたがmyPlugin.stateにアクセスするときに、あなたはVueのインスタンスのデータにアクセスしている.state

storeVM.$dataから

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

を委任するためにゲッターを使用しています。

私は非常に単純な反応性プラグインの例を作成しました：http://codepen.io/CodinCat/pen/GrmLmG?editors=1010

defineReactiveする必要はありませんかVueのインスタンスがあなたのために全力を尽くすことができれば自分で依存関係を通知します。実際、これはVuexの仕組みです。