VueJS Eklenti için Reaktif Bağlama - Nasıl Yapılır? , <p></p> Şu ı Vuex benzemeye yakından eklenti yapmaya çalışıyorum:

Question

Ben kaynaklı açık olacak Kılıfı/CouchDB için bir Vue eklenti üzerinde çalışıyorum, ama sürece ben yaşıyorum bir sorunu çözmek gibi İçsel bir durumu vardır ve değişiklikleri tespit eder ve gerçekleştiğinde görünümü oluşturur.

Vue örneğinin içinde, bir nesneyi başlatıyorum ve bu nesne içinde, iyi olana kadar defineReactive ile iki veya üç nesneyi reaktif yapmaya çalışıyorum.

Ancak, bu nesnenin içindeki bazı değerleri değiştirmeye çalıştığımda, değişiklikler Görünüm'e yayılmaz. AMA 'u açık olarak çağırırsam, $ bucket._state.projects .__ ob __. Dep.notify(), değişiklikler yayılır.

Vue örneğinin mevcut nesne temsili bu gibidir: Vue { $bucket: { _state: { projects: {} } } }

$bucket._statedefineReactive ile başlatıldı. Çalışması gerektiğine inanıyorum, ama bu durumda tam olarak sorunun ne olduğundan emin değilim.

Herhangi bir fikrin var mı?

kod kısmi Buraya dersiniz bu düşünceye derinliklerine dalmak vermedi 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

neredeyse benzer, ancak ben sizin gibi bu iç API'leri kullanmak gerekmez düşünüyorum Vue.util.defineReactive veya this.$bucket._state.projects.__ob__.dep.notify()

Vue'nun kendisi reaktif olduğundan, verileri depolamak için bir Vue örneğini kullanabilirsiniz, reaktivite sistemini yeniden icat etmeye gerek yoktur.

kurucusundaki örneği oluşturma:

this.storeVM = new Vue({ data }) 

ve Vue örneğinin .state

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

storeVM.$data Eğer myPlugin.state erişirken öyleyse, erişen veri devretmek getter kullanın. Vue örneği sizin için her şeyi yapabilirim http://codepen.io/CodinCat/pen/GrmLmG?editors=1010

defineReactive gerek yok ya da tek başınıza bağımlılıkları bildirmek:

Ben çok basit bir reaktif eklenti örnek oluşturdu. Aslında Vuex böyle çalışır.