VueJS'deki Angular Service'in eşdeğeri nedir?

Sunucuyla konuşan tüm işlevlerimi VueJS'de tek bir yeniden kullanılabilir dosyaya almak istiyorum.

Eklentiler en iyi alternatif gibi görünmüyor. Daha az bileşen şablonu ..?

Toplamda 4 yol vardır:

• Vatansız hizmet: o zaman mixins kullanmalısınız
• Durum bilgisi olan hizmet: Vuex kullanın
• Hizmeti dışa aktarın ve bir vue kodundan içe aktarın
• herhangi bir javascript genel nesnesi

API çağrıları yapmak için HTTP istemcisi olarak axios kullanıyorum, klasörümde bir gatewaysklasör oluşturdum srcve her arka uç için dosya koydum , aşağıdaki gibi axios örnekleri oluşturdum

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'
  }
})

Artık bileşeninizde, api'den aşağıdaki gibi veri alacak bir işleve sahip olabilirsiniz:

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

Ben Birden bileşenlerindeki bu yöntemi yeniden kullanmak istediğinizi varsayalım gibi kullanabileceğiniz katmalar vue.js arasında:

Mixinler, Vue bileşenleri için yeniden kullanılabilir işlevleri dağıtmanın esnek bir yoludur. Bir mixin nesnesi herhangi bir bileşen seçeneği içerebilir. Bir bileşen bir mixin kullandığında, karışımdaki tüm seçenekler bileşenin kendi seçenekleriyle "karıştırılır".

Böylece mixin'e bir yöntem ekleyebilirsiniz ve bu, mixin'in karıştırılacağı tüm bileşenlerde mevcut olacaktır. Aşağıdaki örneğe bakın:

// 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')
  }
})

Çoğunlukla Vue Resource kullanıyorum.

1. API uç noktasına bağlantı yaptığım yerde yeni bir dosya oluşturuyorum Vue.http.xxx. Diyelim ki postaları çıkaran uç noktamız var Projenizde yeni dizin oluştur, onu çağırıyorum servicesve sonra adında dosya oluşturuyorum PostsService.js- içerik şuna benzer:

import Vue from 'vue'

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

Sonra bu servisi kullanmak istediğim bileşene gidiyorum ve onu içe aktarıyorum

import PostsService from '../services/PostsService'

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

Bu yaklaşım hakkında daha fazla bilgi için GitHub'daki depomu kontrol etmekten çekinmeyin https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app'daki

Uygulamanızın her yerinden erişebileceğiniz bir API Sağlayıcı oluşturmanızı öneririm.

Basitçe bir src/utilsklasör oluşturun ve içinde şu adla bir dosya oluşturun:api.js .

İçinde, API'nizle bir nesne veya bir ES6 statik sınıfı olarak nasıl iletişim kuracağını bilen sarmalayıcınızı dışa aktarın (sınıflardan korkmuyorsanız ikincisinin nasıl göründüğünü ve çalıştığını tercih ederim). Bu sağlayıcı, istediğiniz herhangi bir HTTP istek kitaplığını kullanabilir ve tüm kod tabanını aramak yerine tek bir dosyayı (bu dosyayı) değiştirerek daha sonra kolayca takas edebilirsiniz. Burada api.example.com/v1, SSL kullanan bir REST API'sine sahip olduğumuzu varsayarak, axios kullanımına bir örnek verilmiştir :

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
})

Ardından, main.jsdosyanızda veya Vue uygulamasını önyüklediğiniz başka bir yerde aşağıdakileri yapın:

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

Vue.$api = api

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

Artık ona Vue uygulamanızda ve Vue'nun kendisini içe aktardığınız her yerden erişebilirsiniz:

<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>

veya:

// 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
}

Bu yardımcı olur umarım.

Bence basit sorunuz için yanıt, işlevler içeren (ANgular'daki sınıftaki yöntemlere eşdeğer) ve bunları ES6 içe ve dışa aktarımlarını kullanarak bileşenlere doğrudan içe aktaran herhangi bir ES6 modülü olabilir. Bileşenlere enjekte edilebilecek böyle bir hizmet yoktur.

Tüm HTTP sunucu çağrılarınızı yerleştirebileceğiniz kendi hizmetinizi oluşturabilir ve ardından bunları kullanmak istediğiniz bileşenlere aktarabilirsiniz.

En iyisi, karmaşık durum yönetimi uygulamaları için Vuex'i kullanmaktır çünkü Vuex'te, her zaman eşzamansız olarak çalışan ve ardından sonucu aldığınızda mutasyonu gerçekleştiren eylemler aracılığıyla tüm eşzamansız çağrıları yönetebilirsiniz. değişmez bir şekilde (tercih edilen). Bu durum bilgisi olan bir yaklaşımdır.

Başka yaklaşımlar da var. Ama bunlar benim kodumda takip ettiklerim.