Vue.js बाध्यकारी संदर्भ?

Question

मैं अनुरोध की स्थिति को ट्रैक करने के लिए vue-resource प्लगइन को लपेटने के लिए Vue.js में एक साधारण प्लगइन बनाने की कोशिश कर रहा हूं।

function State() {} 

State.prototype.post = function (ctx, name, url, data, successCB, errorCB) { 
    var options = {}; 

    if (errorCB) { 
     options.error = function (resp) { 
      ctx[name] = 'error'; 

      return errorCB(resp); 
     }; 
    } 

    ctx[name] = 'sending'; 

    ctx.$http.post(url, data, function (res, code, req) { 
     ctx[name] = 'sent'; 

     return successCB(res, code, req); 
    }, options); 
}; 

function install(Vue) { 
    Object.defineProperties(Vue.prototype, { 
     $state: { 
      get: function() { 
       return new State; 
       // return Vue.state.bind({$vm: this}); 
      } 
     } 
    }); 
} 

module.exports = install; 

आप मुझे बुला Vue से ctx संदर्भ यह data मूल्यों है करने के लिए पहुँच प्राप्त करने के पारित देखेंगे। मैंने vue-resource प्लगइन के साथ देखा है कि प्लगइन बल्ले के माध्यम से इसे स्वचालित रूप से बांधने का एक तरीका है सिंटैक्स सही नहीं हो सकता है।

असल में मैं हर समय ctx संदर्भ पास करने से बचना चाहता हूं, इसके पास पहले से ही उचित संदर्भ होना चाहिए।

संपादित

मैं में उचित संदर्भ पारित करने के लिए एक समाधान के लिए देख रहा हूँ स्पष्ट करने के लिए। ऊपर सिर्फ तरह एक उदाहरण के है और मैं राज्यों को ट्रैक करने के लिए एक समाधान के लिए नहीं देख रहा हूँ।

उदाहरण के लिए vue-resource प्लगइन में यदि हम कोई http अनुरोध करते हैं।

this.$http.get('/some/url', {}, function() { 
    this.func(); 

    console.log(this.var); 
}); 

संदर्भ पहले से ही कॉलबैक में है। विचारों को प्राप्त करने के लिए मुझे किसी प्रकार का var _this = this करने की आवश्यकता नहीं है। मैं अपनी प्लगइन के लिए इसे हासिल करना चाहता हूं ताकि उचित this बस वहां हो। मैं इसे vue-resource प्लगइन से समझने की कोशिश कर रहा हूं लेकिन सभी कोडों का पालन करने में कठिन समय है।

Answer 1

मैंने इसे हल करने के लिए समाप्त कर दिया, यह सोचा था कि यह आसान था।

यह इतना vue-router में $http विधि कॉल कि इतने की तरह बनाया जा सकता है चारों ओर सिर्फ एक सरल शॉर्टकट आवरण है:

this.$state.get('/buildings', data, function (resp) { 
    this.buildings = resp.data; 
}, { 
    track: 'getBuildingState' 
}); 

या

this.$state('/buildings', { 
    data: data, 
    track: 'getBuildingState', 
    success: function (resp) { 
     this.buildings = resp.data; 
    } 
}); 

Gihub here

पर टुकड़ा बाहर की जाँच कर सकते हैं

Answer 2

एक जवाब के लिए मेरी टिप्पणी का विस्तार -

तो आप अपने Vue घटक पर एक name संपत्ति है, और आप इस प्लगइन है कि मूल्य को अद्यतन करने के रूप में HTTP अनुरोध की प्रगति करना चाहते हैं? मुझे लगता है कि आपको जिम्मेदारी की एक बुरी श्रृंखला देता है। आपके वू इंस्टेंस के पास name प्रॉपर्टी होना आवश्यक होगा, और आपकी प्लगइन स्टैंडअलोन नहीं होगी।

प्लगइन को अपने सभी राज्य-ट्रैकिंग को स्वयं ही संभालना बेहतर होगा। आप status नामक राज्य की संपत्ति बना सकते हैं जिसे अनुरोध प्रगति के रूप में अपडेट किया गया है। फिर आप this.$state.status का उपयोग कर वर्तमान स्थिति जान सकते हैं। फिर प्लगइन यह है उद्देश्य के लिए जिम्मेदार है, और घटक html में स्वतंत्र रहता

State.prototype.status = "not sent"; 

State.prototype.post = function (url, data, successCB, errorCB) { 
    var options = {}; 

    if (errorCB) { 
     options.error = function (resp) { 
      this.status = 'error'; 

      return errorCB(resp); 
     }; 
    } 

    this.status = 'sending'; 

    this.Vue.http.post(url, data, function (res, code, req) { 
     this.status = 'sent'; 

     return successCB(res, code, req); 
    }, options); 
}; 

function install(Vue) { 
    Object.defineProperties(Vue.prototype, { 
     $state: { 
      get: function() { 
       var state = new State; 
       state.Vue = Vue; 
       return state; 
      } 
     } 
    }); 
} 

तब:

<div v-if="$state.status == 'sending'">Sending...</div> 
<div v-if="$state.status == 'sent'">Sent!</div> 
<div v-if="$state.status == 'error'">Error!</div> 

आप चीजों को अपने तरीके से करना चाहते हैं, तो मुझे लगता है कि तुम सिर्फ पूरे करने होंगे अपने Vue घटक के भीतर से हर बार post() को this बाँध:

this.$state.post(args){ 

}.bind(this) 

तो post समारोहभीतरआपका वू होगा। मुझे लगता है कि पहला तरीका सबसे अच्छा है

संपादित करें -

कार्यों successCb और errorCb पहले से ही, Vue घटक के दायरे में चलाए जा रहे हैं, क्योंकि उन पर वहाँ परिभाषित किया। vue-resource आपकी स्थिति में कॉलबैक के पास State का दायरा है क्योंकि आपने उन्हें यहां परिभाषित किया है, जो तब तक नहीं बदला जा रहा है जब तक आप संदर्भ में पास नहीं करते हैं।लेकिन यहां बिंदु यह है कि आपकी प्लगइन को घटक के संदर्भ को जानने की आवश्यकता नहीं है, जैसे vue-resource घटक के संदर्भ को कभी नहीं जानता है। यह सिर्फ डेटा प्राप्त करता है, अनुरोध भेजता है, और कॉलबैक चलाता है। कॉलिंग घटक के बारे में कुछ भी नहीं जानता।

तो कार्यों आप कॉलबैक के रूप this.$state.post के साथ भेजी गई है, तो आप this.var का उपयोग कर अपने Vue डेटा संपादित कर सकते हैं - के रूप में आप में सक्षम होना चाहिए। कॉलबैक में आप अपने राज्य से Vue.http.post पर भेजते हैं, आप State ऑब्जेक्ट पर गुणों को संपादित कर सकते हैं - फिर से अपेक्षित व्यवहार। आपको name या statusState का एक भाग बनाने की आवश्यकता है और फिर स्थिति को जांचने के लिए अपने Vue घटक के भीतर से this.$state.name के रूप में संदर्भित करें।

संपादित 2:

तुम भी एक चर $state.response है और myCustomVar पास कर सकता है, और फिर $state.response.myCustomVar ट्रैक। इस तरह आप प्रत्येक अनुरोध पर विभिन्न कस्टम चरों में पारित कर सकते हैं और उन्हें स्वतंत्र रूप से ट्रैक कर सकते हैं