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

Question

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

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

Answer 1

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

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

Comments

जब आप एक टाइपस्क्रिप्ट / जेएस वर्ग बना सकते हैं जिसमें इसके लिए राज्य और तर्क होते हैं तो सेवाओं के लिए स्ट्रिंग शाब्दियों के साथ कॉलिंग विधियों के Vuex विषमताओं का पालन करना बहुत अजीब लगता है? आप एक राज्य वर्ग को कैसे Vue के भीतर एक सेवा के रूप में उपयोग कर सकते हैं?

— डगलस गास्केल

Answer 2

मैं एपीआई कॉल करने के लिए HTTP क्लाइंट के रूप में axios का उपयोग कर रहा हूं, मैंने gatewaysअपने srcफ़ोल्डर में एक फ़ोल्डर बनाया है और मैंने प्रत्येक बैकएंड के लिए फाइलें डाली हैं , जैसे 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)
  }
}

---

जैसा कि मैंने आपको कई घटकों में इस विधि को फिर से उपयोग करना चाहते हैं मान, तो आप उपयोग कर सकते हैं mixins 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')
  }
})

Comments

जब आप उपयोगकर्ता लॉगिन करेंगे तो आप myApi.js के X-Auth-Token को कैसे अपडेट करेंगे

— अमरजीत सिंह

आम तौर पर यह एक स्थिर मूल्य नहीं है

— अमरजीत सिंह

Answer 3

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

1. मैं नई फ़ाइल बनाता हूं, जहां मैं एपीआई एंडपॉइंट का उपयोग करके कनेक्शन करता हूं। तो 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 पर मेरे रेपो की जाँच करने के लिए स्वतंत्र महसूस करें।

Comments

इवान यू के अनुसार, वीयू-रिसोर्स रिटायर हो जाएगा और एक्सिस की जगह सिफारिश करेगा। उनके लेख को मैं वास्तव में आपके दृष्टिकोण को पसंद करता हूं जो कि कोणीय 2 की तरह महसूस करता है

— ठीक

@noypee VueResource अभी भी काम करता है। लेकिन कभी भी आप जो चाहते हैं उसका उपयोग न करें, यह एक्सियोस के साथ बिल्कुल वैसा ही होगा।

— बेलमिन बेदक

हाँ, Vue2 अच्छी तरह से अपने लेख के अनुसार Vue-संसाधन को समायोजित करने के लिए जारी रहेगा

— codely

यह बहुत अच्छा है लेकिन इस तरह के घटक का मॉक-पोस्टस् सेवा के साथ परीक्षण कैसे करें?

— श्रीके

@noypee, vue-resource को सेवानिवृत्त नहीं किया जा रहा है - इवान ने कहा कि वह केवल है "आधिकारिक सिफारिश की स्थिति से इसे रिटायर कर रहा है" । उन्होंने आगे स्पष्ट किया कि क्यों उनकी टीम ने निष्कर्ष निकाला कि अब आधिकारिक AJAX पुस्तकालय की आवश्यकता नहीं थी। जुड़ा हुआ लेख इसे अच्छी तरह से समझाता है। और यह ध्यान दिया जाना चाहिए कि vue-resource अभी भी सक्रिय रूप से बनाए रखा गया है और एक पूरी तरह से व्यवहार्य विकल्प है।

— 18

Answer 4

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

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

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

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
}

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

Answer 5

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

Answer 6

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

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

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