Vue.js: एक सेवा को परिभाषित करें

Question

मैं Vue.js को कोणीय के विकल्प के रूप में देख रहा हूं और मुझे वास्तव में अब तक यह पसंद है। इसके लिए एक भावना प्राप्त करने के लिए, मैं एक मौजूदा कोणीय परियोजना को Vue परियोजना के लिए फिर से तैयार कर रहा हूं। मैं सिर्फ उस बिंदु पर हूं जहां मुझे अपने REST API के साथ संवाद करने की आवश्यकता है।

कोणीय में मैं उस के लिए एक सेवा को परिभाषित करता था, जिसे उस प्रत्येक नियंत्रक में इंजेक्ट किया जाता था जो इसकी आवश्यकता थी। जैसा कि मैं समझता हूं कि Vue को "सेवा" निर्माण का पता नहीं लगता है। यह कैसे Vue में प्राप्त किया जा सकता है?

मैंने विचार किया vue-resource, लेकिन यह केवल http कार्यात्मकताओं के लिए है जहाँ तक मैं समझता हूँ। जैसा कि मैंने jQuery का भी उपयोग किया है, यह अप्रचलित है।

उदाहरण:

मेरे पास है vueComponent1और vueComponent2। दोनों को एक ही REST संसाधन तक पहुँचने की आवश्यकता है। इसे संभालने के लिए मुझे एक केंद्रीय सेवा चाहिए, जो दोनों घटक REST संसाधन के अनुरोधों के लिए उपयोग कर सकते हैं। कोणीय में 'सेवा' घटक होता है, जो वास्तव में ऐसा करता है। Vue नहीं है।

Comments

आपको जो चाहिए, उसका एक ठोस उदाहरण प्रदान करें। http REST के साथ संवाद करने के लिए पर्याप्त है

— gurghet

: Vue-संसाधन पर एक नज़र डालें github.com/vuejs/vue-resource

— निल्स

Answer 1

Vue.js प्रलेखन से।

Vue.js अपने आप में पूर्ण विकसित ढांचा नहीं है - यह केवल दृश्य परत पर केंद्रित है।

MVC के बाहर V पर ध्यान केंद्रित करने वाली लाइब्रेरी के रूप में यह सेवाओं जैसी चीजें प्रदान नहीं करता है।

क्या आप Browserify या Webpack जैसे किसी तरह के मॉड्यूल लोडर का उपयोग कर रहे हैं?
तब आप ईएस 6 के मॉड्यूल सिस्टम का लाभ उठा सकते हैं।
आपको बस एक सादा जावास्क्रिप्ट वर्ग बनाना है जो इस नए मॉड्यूल द्वारा निर्यात किया जा रहा है।

एक उदाहरण इस तरह दिख सकता है:

export default class RestResource {

  sendRequest() {
    // Use vue-resource or any other http library to send your request
  }

}

अपने vue घटक 1 और 2 के अंदर आप इस सेवा का उपयोग वर्ग आयात करके कर सकते हैं।

import RestResource from './services/RestResource';

const restResourceService = new RestResource();

restResourceService.sendRequest();

Comments

उद्धरण के लिए धन्यवाद। इसका मतलब यह है कि देखने और मॉडल के नीचे कोई संरचना या कुछ भी नहीं है। अगर मुझे सेवा करनी है, तो मुझे शुद्ध जेएस का उपयोग करके अपना स्वयं का निर्माण करना होगा।

— हेरब डर्ब

movieslist.vue?1be4:38Uncaught TypeError: _resource.Resource is not a constructorजब मैं इसे इस्तेमाल कर रहा हूं ...

— जॉर्ज कैटसनोस

आप एक महत्वपूर्ण अंतर को याद कर रहे हैं कि आप कोणीय पृष्ठभूमि के साथ क्या उम्मीद करेंगे। "सेवा" को इस मामले में कई बार

— त्वरित

हाँ, आपको इस तरह से एक ही सेवा के कई उदाहरण मिलते हैं। यह एक समस्या नहीं है जब यह सिर्फ एक अजाक्स का अनुरोध करता है (केवल अक्षम), लेकिन जब आप अपने डेटा मॉडल के लिए सेवा का उपयोग करते हैं, तो आपको उसे तत्काल सेवा की आवश्यकता होती है जहां आप सेवा की घोषणा करते हैं, और केवल उदाहरण निर्यात करते हैं।

— एमसीवी

यदि आप एक 'कोणीय शैली' सिंगलटन सेवा चाहते हैं, तो आप बस अपने ऐप में इस वर्ग का एक उदाहरण बना सकते हैं, और इसे निर्यात कर सकते हैं: export const restResourceService = new RestResource();और फिर इसे जहाँ चाहें आयात कर सकते हैं। हालांकि, यह वास्तव में एक समस्या का समाधान है जो हमने खुद के लिए बनाया है - केवल एक फ़ंक्शन का उपयोग क्यों न करें? export function sendRequest() { // Make the request } अंत में, ध्यान दें कि आपको http अनुरोध करने के लिए एक पुस्तकालय की भी आवश्यकता नहीं है - अपनी परियोजना आवश्यकताओं के आधार पर आप केवल जावास्क्रिप्ट fetchएपीआई का उपयोग कर सकते हैं ।

— विल टेलर

Answer 2

बिल्डिंग लार्ज-स्केल एप्स पर Vue.js प्रलेखन से ।

समुदाय ने vue-resource प्लगइन का योगदान दिया है , जो Restful API के साथ काम करने का एक आसान तरीका प्रदान करता है। आप अपनी पसंद की किसी भी अजाक्स लाइब्रेरी का उपयोग भी कर सकते हैं, जैसे $ .ajax या SuperAgent ।

Vue को आपको एक विशिष्ट आर्किटेक्चर का पालन करने की आवश्यकता नहीं है, क्योंकि यह केवल MVC या MVVM आर्किटेक्चर में व्यू लेयर को संदर्भित करता है। जैसा कि @Marc ने पहले ही अपने जवाब में कहा था , एक अच्छा अभ्यास Browserify या Webpack जैसे एक मॉड्यूल लोडर का उपयोग करना है ताकि आप अलग-अलग फ़ाइलों में अपनी "सेवाएं" बना सकें, वे आयात करें जहां आपको ज़रूरत है। Vue-cli का उपयोग करके मॉड्यूल लोडर के साथ अपने ऐप को तैयार करना बहुत आसान है ।

वास्तव में, मैं वास्तव में घटक आधारित ऐप्स के लिए फ्लक्स आर्किटेक्चर को पसंद करता हूं, फिर मैं आपको एक फ्लक्स-प्रेरित एप्लिकेशन आर्किटेक्चर, वीयूएक्स पर एक नज़र डालने की सलाह देता हूं जो विशेष रूप से Vue.js ऐप के अंदर राज्य के प्रबंधन के लिए डिज़ाइन किया गया है।

इस तरह, आप अपने एपीआई का अनुरोध करने के लिए वी-संसाधन का उपयोग करने वाले कार्य बना सकते हैं , फिर आप डेटा आने पर म्यूटेशन भेज सकते हैं, उन सभी घटकों के साथ जो उस डेटा की पहले से ही वैश्विक स्थिति से बाध्य हैं, स्वचालित रूप से प्रतिक्रिया कर रहे हैं। दूसरे शब्दों में, आपके घटकों को स्वयं सेवाओं को कॉल करने की आवश्यकता नहीं है, वे केवल म्यूटेशन द्वारा भेजे गए राज्य परिवर्तनों पर प्रतिक्रिया करते हैं।

Comments

बस यह ध्यान दें कि vue-resource अब ऑफिशियल रूप से अनुशंसित नहीं है। source

— lightswitch05

विवरणों की जाँच करें:

— रिटेनिंग व्यू

Answer 3

आप अपनी सेवा के लिए एक वर्ग का उदाहरण निर्यात कर सकते हैं:

export default new class {
   ...
}

आपके घटक, या किसी अन्य स्थान पर, आप उदाहरण का आयात कर सकते हैं और आपको हमेशा वही मिलेगा। इस तरह यह एक इंजेक्ट की गई कोणीय सेवा के समान व्यवहार करता है, लेकिन उपयोग किए बिना this।

import myService from '../services/myservice';

Vue.component('my-component', {
  ...
  created: function() {
    myService.oneFunction();
  }
  ...
})

Answer 4

आपके पास इस प्रश्न के कुछ बहुत अच्छे उत्तर हैं । VueJS में कोणीय सेवा के बराबर क्या है?

जैसा कि @Otabek Kholikov वहां कहता है - आपके पास 4 विकल्प हैं:

1. स्टेटलेस सर्विस: फिर आपको मिक्सी का उपयोग करना चाहिए
2. राज्य सेवा: Vuex का उपयोग करें
3. निर्यात सेवा और एक आयात से आयात करें कोड
4. किसी भी जावास्क्रिप्ट वैश्विक वस्तु

अपनी परियोजनाओं में मुझे पसंद है (4)। यह मुझे अधिकतम लचीलापन देता है और मुझे केवल कार्यान्वयन की आवश्यकता होती है (मैं उदाहरण के लिए Vuex नहीं लाता हूं और इसके नियमों के लिए सख्त नहीं होना चाहिए और कोई "जादू" नहीं है - सभी कोड मेरा है)। आपके पास ऊपर उल्लिखित प्रश्न में कार्यान्वयन का एक उदाहरण है ।

Answer 5

यदि आप एक मॉड्यूल लोडर का उपयोग नहीं कर रहे हैं, तो आप एक कस्टम प्लगइन को परिभाषित कर सकते हैं । कुछ उदाहरण कोड:

var myPlugin = {
        install: function (Vue, options) {
            //private
            var myPrivateProperty = 'Private property';

            //instance properties and methods
            Vue.prototype.$myPublicProperty = 'Public Property';

            Vue.prototype.$myAddedMethod = function () {
                return myPrivateProperty;
            };
            Vue.prototype._getData = function (url) {
                return url;
            };

            //static properties and methods
            Vue.myStaticProperty = 'My static prop';
            Vue.myStaticMethod = function () {
                console.log('in');
            }
        }
    };

    Vue.use(myPlugin);

    new Vue({
        el: '#app',
        created: function () {
            //using instance
            console.log(this.$myAddedMethod());
            console.log('my get data: ' + this._getData('some url'));
            console.log(this.$myPublicProperty);

            //using static
            console.log(Vue.myStaticProperty);
            Vue.myStaticMethod();
        }
    });

आप अन्य पुस्तकालयों में भी प्लग इन कर सकते हैं, इस पोस्ट में दिखाया गया है कि axios.js में कैसे प्लग इन करें

Answer 6

आप विश्व स्तर पर vue संसाधन को कॉन्फ़िगर कर सकते हैं

Vue.http.options.root = "your base url"

और अब हर http कॉल पर आप केवल संसाधन के नाम से कॉल कर सकते हैं -

this.$http.get('');
this.$http.get('users')