Что эквивалентно Angular Service в VueJS?

Question 1

Я хочу поместить все свои функции, которые общаются с сервером и извлекают данные, в один файл многократного использования на VueJS.

Плагины не кажутся лучшей альтернативой. Без шаблонов компонентов ..?

Question 2

Всего существует 4 способа:

Сервис без сохранения состояния: тогда вам следует использовать миксины
Сервис с отслеживанием состояния: используйте Vuex
Служба экспорта и импорт из кода vue
любой глобальный объект javascript

Question 3

Я использую axios в качестве HTTP-клиента для выполнения вызовов api, я создал 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'
  }
})

Теперь в вашем компоненте у вас может быть функция, которая будет извлекать данные из API, как показано ниже:

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

Question 4

Я в основном использую Vue Resource.

1. Я создаю новый файл, в котором я подключаюсь к конечной точке API, используя. 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.

Question 5

Я предлагаю создать поставщика API, к которому вы можете получить доступ из любого места в своем приложении.

Просто создайте src/utilsпапку и внутри нее файл с именем api.js.

В нем экспортируйте свою оболочку, которая знает, как взаимодействовать с вашим API в качестве объекта или статического класса ES6 (я предпочитаю, как последний выглядит и работает, если вы не боитесь классов). Этот провайдер может использовать любую библиотеку HTTP-запросов, которая вам нравится, и вы можете легко заменить ее позже, изменив один файл (этот) вместо того, чтобы искать всю кодовую базу. Вот пример использования axios, предполагая, что у нас есть доступный REST API 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
}

Надеюсь это поможет.

Question 6

Я думаю, что на ваш простой вопрос ответом может быть любой модуль ES6, содержащий функции (эквивалентные методам в классе в ANgular) и напрямую импортирующий их в компоненты с использованием импорта и экспорта ES6. Нет таких сервисов, которые можно было бы внедрить в компоненты.

Question 7

Вы можете создать свою собственную службу, в которой вы можете разместить все вызовы HTTP-сервера, а затем импортировать их в компоненты, где вы хотите их использовать.

Лучше всего использовать Vuex для сложных приложений управления состоянием, потому что в Vuex вы можете обрабатывать все асинхронные вызовы с помощью действий, которые всегда выполняются асинхронно, а затем фиксировать мутацию, как только вы получите результат. Мутация будет напрямую взаимодействовать с состоянием и будет обновляться это неизменным образом (что предпочтительно). Это подход с отслеживанием состояния.

Есть и другие подходы. Но это те, которым я следую в своем коде.