service VueJS में कोणीय सेवा के समकक्ष क्या है?




vue.js vuejs2 (6)

मैं अपने सभी कार्य करना चाहता हूं जो सर्वर से बात करते हैं और VueJS में एक पुन: प्रयोज्य फ़ाइल में डेटा प्राप्त करते हैं।

प्लगइन्स सबसे अच्छा विकल्प नहीं लगता है। टेम्पलेट कम घटक ..?

https://code.i-harness.com


आप अपनी स्वयं की सेवा बना सकते हैं जहाँ आप अपने सभी HTTP सर्वर कॉल को रख सकते हैं और फिर उन्हें उन घटकों पर आयात कर सकते हैं जहाँ आप उनका उपयोग करना चाहते हैं।

सबसे अच्छा है जटिल राज्य प्रबंधन अनुप्रयोगों के लिए Vuex का उपयोग करना क्योंकि Vuex में आप क्रियाओं के माध्यम से सभी async कॉल को संभालने में सक्षम होते हैं जो हमेशा असिंक्रोनस रूप से चलते हैं और फिर परिणाम आने पर एक बार म्यूटेशन करते हैं। स्थिति सीधे राज्य के साथ सहभागिता करेगी और अपडेट करेगी यह अपरिवर्तनीय तरीके से (जिसे पसंद किया जाता है)। यह राज्यव्यापी दृष्टिकोण है।

अन्य दृष्टिकोण भी हैं। लेकिन ये वही हैं जिनका मैं अपने कोड में अनुसरण करता हूं।


कुल में 4 तरीके हैं:

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

मुझे लगता है कि आपके साधारण प्रश्न का उत्तर किसी भी ES6 मॉड्यूल युक्त कार्य हो सकता है (ANgular में कक्षा में विधियों के बराबर) और सीधे ES6 आयात और निर्यात का उपयोग करते हुए उन्हें घटकों में आयात करना। ऐसी कोई सेवा नहीं है जिसे घटकों में इंजेक्ट किया जा सके।


मैं एक एपीआई प्रदाता बनाने का सुझाव देता हूं जिसे आप अपने ऐप में कहीं से भी एक्सेस कर सकते हैं।

बस एक src/utils फ़ोल्डर बनाएं और उसके अंदर एक फाइल जिसे api.js कहा जाता है।

इसमें, अपने रैपर को निर्यात करें जो जानता है कि ऑब्जेक्ट या ईएस 6 स्टेटिक क्लास के रूप में अपने एपीआई के साथ कैसे संवाद करें (मुझे पसंद है कि उत्तरार्द्ध कैसा दिखता है और काम करता है यदि आप कक्षाओं से डरते नहीं हैं)। यह प्रदाता किसी भी HTTP अनुरोध पुस्तकालय का उपयोग कर सकता है जिसे आप पसंद करते हैं और आप इसे आसानी से बाद में एक फ़ाइल (इस एक) को बदलकर पूरे कोडबेस को शिकार करने के बजाय आसानी से स्वैप कर सकते हैं। यहाँ axios का उपयोग करने का एक उदाहरण है, यह मानते हुए कि हमारे पास एक एपीआई एपीआई api.example.com/v1 पर उपलब्ध है जो SSL का उपयोग करता है:

import axios from 'axios'

import { isProduction, env } from '@/utils/env'

const http = null // not possible to create a private property in JavaScript, so we move it outside of the class, so that it's only accessible within this module

class APIProvider {
  constructor ({ url }) {
    http = axios.create({
      baseURL: url,
       headers: { 'Content-Type': 'application/json' }
    })
  }

  login (token) {
    http.defaults.headers.common.Authorization = `Bearer ${token}`
  }

  logout () {
    http.defaults.headers.common.Authorization = ''
  }

  // REST Methods
  find ({ resource, query }) {
    return http.get(resource, {
      params: query
    })
  }

  get ({ resource, id, query }) {
    return http.get(`${resource}/${id}`, {
      params: query
    })
  }

  create ({ resource, data, query }) {
    return http.post(resource, data, {
      params: query
    })
  }

  update ({ resource, id, data, query }) {
    return http.patch(`${resource}/${id}`, data, {
      params: query
    })
  }

  destroy ({ resource, id }) {
    return http.delete(`${resource}/${id}`)
  }
}

export default new APIProvider({
  url: env('API_URL')  // We assume 'https://api.example.com/v1' is set as the env variable
})

इसके बाद, अपनी main.js फ़ाइल में या जहाँ भी आप Vue ऐप को बूटस्ट्रैप करते हैं, निम्न कार्य करें:

import api from '@/src/utils/api'

Vue.$api = api

Object.defineProperty(Vue.prototype, '$api', {
  get () {
    return api
  }
})

अब आप इसे अपने Vue ऐप में कहीं भी एक्सेस कर सकते हैं और कहीं भी आप Vue को स्वयं आयात कर सकते हैं:

<template>
  <div class="my-component">My Component</div
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      data: []
    }
  },
  async created () {
    const response = await this.$api.find({ resource: 'tasks', query: { page: 2 } })

    this.data = response.data
  }
}
</script>

या:

// actions.js from Vuex
import Vue from 'vue'

export async function fetchTasks ({ commit }) {
  const response = await Vue.$api.find({ resource: 'tasks', query: { page: 2 } })

  commit('SAVE_TASKS', response.data)

  return response
}

उम्मीद है की यह मदद करेगा।


मैं एपीआई कॉल करने के लिए HTTP क्लाइंट के रूप में axios का उपयोग कर रहा हूं, मैंने अपने src फ़ोल्डर में gateways फ़ोल्डर बनाया है और मैंने प्रत्येक बैकएंड के लिए फाइलें डाली हैं, निम्नलिखित जैसे axios इंस्टेंसेस बना रहा हूं

myApi.js

import axios from 'axios'
export default axios.create({
  baseURL: 'http://localhost:3000/api/v1',
  timeout: 5000,
  headers: {
    'X-Auth-Token': 'f2b6637ddf355a476918940289c0be016a4fe99e3b69c83d',
    'Content-Type': 'application/json'
  }
})

अब आपके कंपोनेंट में, आपके पास एक फंक्शन हो सकता है, जो निम्नलिखित जैसे एपीआई से डेटा प्राप्त करेगा:

methods: {
 getProducts () {
     myApi.get('products?id=' + prodId).then(response =>  this.product = response.data)
  }
}

जैसा कि मैंने माना कि आप इस विधि को कई घटकों में फिर से उपयोग करना चाहते हैं, आप vue.js के मिश्रण का उपयोग कर सकते हैं:

मिक्स Vue घटकों के लिए पुन: प्रयोज्य कार्यात्मकताओं को वितरित करने का एक लचीला तरीका है। एक मिश्रण वस्तु में किसी भी घटक विकल्प हो सकते हैं। जब एक घटक एक मिश्रण का उपयोग करता है, तो मिश्रक के सभी विकल्प घटक के अपने विकल्पों में "मिश्रित" होंगे।

तो आप मिक्सिन में एक विधि जोड़ सकते हैं और यह सभी घटकों में उपलब्ध होगा, जहां मिक्सिन मिलाया जाएगा। निम्न उदाहरण देखें:

// define a mixin object
var myMixin = {
  methods: {
     getProducts () {
         myApi.get('products?id=' + prodId).then(response =>  this.product = response.data)
      }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

// alternate way to have a mixin while initialising
new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('other code')
  }
})

मैं ज्यादातर Vue Resource का इस्तेमाल कर रहा हूं।

Vue.http.xxx मैं नई फ़ाइल बनाता हूं, जहां मैं Vue.http.xxx का उपयोग करके API एंडपॉइंट से कनेक्शन करता Vue.http.xxx तो Vue.http.xxx लें कि हमारे पास एंडपॉइंट है जो आउटपुट को पोस्ट करता है। अपनी परियोजना में नई निर्देशिका का निर्माण करें, मैं इसे services कॉल करता हूं, और फिर फ़ाइल नाम से PostsService.js - सामग्री इस तरह दिखती है:

import Vue from 'vue'

export default {
  get() {
    return Vue.http.get('/api/posts)
  }
}

फिर मैं उस घटक पर जाता हूं जहां मुझे इस सेवा का उपयोग करना है, और इसे आयात करना है

import PostsService from '../services/PostsService'

export default {
  data() {
   return {
     items: []
   }
  },
  created() {
   this.fetchPosts()
  },
  methods: {
   fetchPosts() {
    return PostsService.get()
      .then(response => {
        this.items = response.data
      })
   }
  }
}

इस दृष्टिकोण के बारे में अधिक जानकारी के लिए, GitHub https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app पर मेरे रेपो की जाँच करने के लिए स्वतंत्र महसूस करें।