Vue.js: একটি পরিষেবা সংজ্ঞায়িত করুন

Question 1

আমি কৌণিকের বিকল্প হিসাবে Vue.js এ দেখছি এবং আমি এখনও পর্যন্ত এটি সত্যিই পছন্দ করি। এর অনুভূতি পেতে, আমি একটি বিদ্যমান প্রকল্পে একটি বিদ্যমান কৌণিক প্রকল্পটি রিফ্যাক্টর করছি। আমি ঠিক সেই সময়েই আছি যেখানে আমার আরএসটি এপিআইয়ের সাথে যোগাযোগ করতে হবে।

কৌণিক আমি এটির জন্য একটি পরিষেবা সংজ্ঞায়িত করতাম, এটি প্রতিটি নিয়ামকের প্রয়োজন হয় যা এটি প্রয়োজন হয়। ভ্যু "সার্ভিস" কনস্ট্রাক্টটি আমার মতো বোঝে বলে মনে হয় না। ভ্যুতে এটি কীভাবে অর্জন করা যায়?

আমি বিবেচনা করেছি vue-resource, তবে এটি যতটা আমি বুঝতে পারছি কেবল ততই http কার্যকারিতার জন্য। আমি যেমন jQuery ব্যবহার করি, এটি অপ্রচলিত।

উদাহরণ:

আমার আছে vueComponent1এবং vueComponent2। উভয়ের একই সমাপ্ত রিসোর্সে অ্যাক্সেস প্রয়োজন। এটি পরিচালনা করতে আমি একটি কেন্দ্রীয় পরিষেবা চাই, যা উভয় উপাদানই REST সংস্থানটিতে অনুরোধের জন্য ব্যবহার করতে পারে। কৌণিকের 'পরিষেবা' উপাদান রয়েছে, যা ঠিক এটি করে that ভ্যু নেই।

Question 2

Vue.js ডকুমেন্টেশন থেকে।

Vue.js নিজেই একটি পূর্ণ-বিকাশযুক্ত কাঠামো নয় - এটি কেবলমাত্র ভিউ স্তরের উপর দৃষ্টি নিবদ্ধ করে।

এমভিসির বাইরে ভি-তে ফোকাস করে এমন একটি গ্রন্থাগার হিসাবে এটি পরিষেবাগুলির মতো জিনিস সরবরাহ করে না।

আপনি কি ব্রাউজারফি বা ওয়েবপ্যাকের মতো কোনও ধরণের মডিউল লোডার ব্যবহার করছেন?
তারপরে আপনি নিজেই একটি পরিষেবা তৈরি করতে ES6 এর মডিউল সিস্টেমটি উত্তোলন করতে পারেন।
আপনাকে যা করতে হবে তা হল একটি সরল জাভাস্ক্রিপ্ট ক্লাস তৈরি করা যা এই নতুন মডিউলটির মাধ্যমে রফতানি করা হচ্ছে।

একটি উদাহরণ এর মত দেখতে পারে:

export default class RestResource {

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

}

আপনার ভ্যূ উপাদান 1 এবং 2 এর ভিতরে আপনি ক্লাসটি আমদানি করে এই পরিষেবাটি ব্যবহার করতে পারেন।

import RestResource from './services/RestResource';

const restResourceService = new RestResource();

restResourceService.sendRequest();

Question 3

বৃহত্তর স্কেল অ্যাপ্লিকেশন বিল্ডিংয়ের উপর Vue.js ডকুমেন্টেশন থেকে ।

সম্প্রদায়টি ভ্যূ রিসোর্স প্লাগইনটিকে অবদান রেখেছে , যা RESTful API গুলি নিয়ে কাজ করার একটি সহজ উপায় সরবরাহ করে। আপনি নিজের পছন্দ মতো যে কোনও অ্যাজাক্স লাইব্রেরিও ব্যবহার করতে পারেন, যেমন aj .জ্যাক্স বা সুপারএজেন্ট ।

ভ্যু আপনাকে কোনও নির্দিষ্ট আর্কিটেকচার অনুসরণ করার প্রয়োজন হয় না, কারণ এটি কেবলমাত্র এমভিসি বা এমভিভিএম স্থাপত্যের ভিউ স্তরকে বোঝায়। হিসাবে @Marc ইতিমধ্যে বলেন তার উত্তর , একটি ভাল অভ্যাস Browserify বা Webpack মত একটি মডিউল লোডার ব্যবহার করতে যাতে আপনি আপনার "পরিষেবা" পৃথক ফাইলে তৈরি করতে পারেন, তারা আমদানি তুমি কোথায় প্রয়োজন হয়। এটি খুব সহজ একটি মডিউল লোডার ব্যবহার করে আপনার অ্যাপ গঠন এর Vue-CLI ।

প্রকৃতপক্ষে, আমি ব্যক্তিগতভাবে উপাদান ভিত্তিক অ্যাপ্লিকেশনগুলির জন্য ফ্লাক্স আর্কিটেকচারটি পছন্দ করি, তারপরে আমি আপনাকে ভয়েস , অনুপ্রেরণামূলক অ্যাপ্লিকেশন আর্কিটেকচারের দিকে নজর দেওয়ার পরামর্শ দিচ্ছি যা ভ্যু.জেএস অ্যাপসের অভ্যন্তরে রাষ্ট্র পরিচালনার জন্য বিশেষভাবে ডিজাইন করা হয়েছে।

এইভাবে, আপনি এমন ক্রিয়া তৈরি করতে পারেন যা আপনার এপিআই - র অনুরোধের জন্য মান -সংস্থান ব্যবহার করে , তারপরে আপনি ডেটা উপস্থিত হলে মিউটেশনগুলি প্রেরণ করতে পারেন, এমন সমস্ত উপাদানগুলির জন্য যা ইতিমধ্যে গ্লোবাল স্টেটের সাথে আবশ্যক যে ডেটার প্রয়োজন হয়, স্বয়ংক্রিয়ভাবে প্রতিক্রিয়া জানায়। অন্য কথায়, আপনার উপাদানগুলিকে নিজেই পরিষেবাগুলিতে কল করার দরকার নেই, তারা কেবল মিউটেশনগুলি দ্বারা প্রেরিত রাজ্য পরিবর্তনগুলিতে প্রতিক্রিয়া দেখায়।

Question 4

আপনি আপনার পরিষেবার জন্য কোনও শ্রেণীর উদাহরণ রফতানি করতে পারেন:

export default new class {
   ...
}

আপনার উপাদান বা অন্য কোনও জায়গায়, আপনি উদাহরণটি আমদানি করতে পারেন এবং আপনি সর্বদা একই পাবেন। এইভাবে এটি কোনও ইনজেকশনের কৌণিক পরিষেবাটির অনুরূপ আচরণ করে, তবে ব্যবহার না করে this।

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

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

Question 5

এই প্রশ্নের আপনার কাছে খুব ভাল উত্তর রয়েছে ভ্যুজেএস-এ অ্যাংুলার সার্ভিসের সমতুল্য কী?

@ ওটাবেক খোলিকভ যেমন বলেছেন - আপনার কাছে 4 টি বিকল্প রয়েছে:

রাষ্ট্রবিহীন পরিষেবা: তাহলে আপনার মিক্সিন ব্যবহার করা উচিত
স্টেটফুল সার্ভিস: ভেক্স ব্যবহার করুন
রফতানি পরিষেবা এবং একটি মান কোড থেকে আমদানি করুন
যে কোনও জাভাস্ক্রিপ্ট গ্লোবাল অবজেক্ট

আমার প্রকল্পগুলিতে আমি পছন্দ করি (4) এটি আমাকে সর্বাধিক নমনীয়তা দেয় এবং কেবলমাত্র আমার প্রয়োজনীয় প্রয়োগসমূহ রয়েছে (আমি উদাহরণস্বরূপ ভেক্সকে আনতে পারি না এবং এর বিধিগুলির কঠোর হওয়া উচিত নয় এবং কোনও "যাদু" নেই - সমস্ত কোড আমার)। আমি উপরে উল্লিখিত প্রশ্নে প্রয়োগের একটি উদাহরণ রয়েছে ।

Question 6

আপনি যদি কোনও মডিউল লোডার ব্যবহার না করে থাকেন তবে আপনি একটি কাস্টম প্লাগইন সংজ্ঞায়িত করতে পারেন । কিছু উদাহরণ কোড:

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 এ কীভাবে প্লাগ ইন করবেন তা দেখায়

Question 7

আপনি বিশ্ব মান হিসাবে মান উত্স কনফিগার করতে পারেন

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

এবং এখন প্রতিটি HTTP কলটিতে আপনি কেবল উত্সের নামে কল করতে পারেন -

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