2017-01-22 21 views
7

मैं पाउच/CouchDB के लिए एक Vue प्लगइन जो खुले sourced किया जाएगा पर काम कर रहा हूँ, लेकिन जब तक मैं एक मुद्दा मैं कर रहा हूँ पता लगा सकते हैं के रूप में:VueJS प्रतिक्रियाशील बाध्यकारी - कैसे करें?

वर्तमान में मैं Vuex सदृश बारीकी प्लगइन बनाने के लिए कोशिश कर रहा हूँ, जिसमें एक आंतरिक राज्य है, और परिवर्तनों का पता लगाता है, और जब वे होते हैं तो दृश्य प्रस्तुत करते हैं।

वू उदाहरण के अंदर मैं एक वस्तु शुरू कर रहा हूं, और उस वस्तु के भीतर मैं दो या तीन ऑब्जेक्ट्स को पुनः सक्रिय करने की कोशिश कर रहा हूं, परिभाषित प्रतिक्रिया के साथ, यहां तक ​​कि यह अच्छा है।

लेकिन जब मैं उस वस्तु के अंदर कुछ मूल्यों को बदलने की कोशिश करता हूं, तो परिवर्तन दृश्य में प्रचारित नहीं होते हैं। लेकिन अगर मैं स्पष्ट रूप से पर कॉल करता हूं। $ Bucket._state.projects .__ ob __। Dep.notify(), परिवर्तन प्रचारित करते हैं।

Vue उदाहरण के मौजूदा वस्तु प्रतिनिधित्व इस तरह है: Vue { $bucket: { _state: { projects: {} } } }

$bucket._statedefineReactive साथ प्रारंभ किया गया है। जो मुझे विश्वास है कि इसे काम करना चाहिए, लेकिन मुझे यकीन नहीं है कि इस मामले में सही समस्या क्या है।

कोई विचार?

कोड की एक आंशिक, यहाँ में वर्ग लगभग 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); 
     } 
    } 
    } 

उत्तर

9

के लिए इसी तरह मैं इस विचार में गहरा गोता नहीं किया है, लेकिन मुझे लगता है कि आप की तरह इन आंतरिक API का उपयोग करने की जरूरत नहीं है Vue.util.defineReactive या this.$bucket._state.projects.__ob__.dep.notify()

क्योंकि वू स्वयं प्रतिक्रियाशील है, आप डेटा स्टोर करने के लिए एक वू इंस्टेंस का उपयोग कर सकते हैं, प्रतिक्रियाशीलता प्रणाली को फिर से आविष्कार करने की आवश्यकता नहीं है।

निर्माता में उदाहरण बनाएँ:

this.storeVM = new Vue({ data }) 

और .statestoreVM.$data

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

इसलिए जब आप का उपयोग myPlugin.state, आप तक पहुँच रहे हैं करने के लिए Vue उदाहरण के डेटा को सौंपने के लिए गेटर का उपयोग करें। http://codepen.io/CodinCat/pen/GrmLmG?editors=1010

defineReactive की आवश्यकता नहीं है या खुद ही निर्भरता को सूचित करता है, तो Vue उदाहरण आप के लिए सब कुछ कर सकते हैं:

मैं एक बहुत ही सरल प्रतिक्रियाशील प्लगइन उदाहरण बनाया। वास्तव में, वैसे ही वूएक्स काम करता है।

संबंधित मुद्दे