Я хочу, чтобы все мои функции говорили с сервером и извлекали данные в один файл многократного использования в VueJS.
Плагины не кажутся лучшей альтернативой. Шаблон меньше компонентов..?
Я хочу, чтобы все мои функции говорили с сервером и извлекали данные в один файл многократного использования в VueJS.
Плагины не кажутся лучшей альтернативой. Шаблон меньше компонентов..?
Всего есть 4 способа:
Я использую 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)
}
}
Как я предполагаю, вы хотите повторно использовать этот метод в нескольких компонентах, вы можете использовать mixins vue.js:
Mixins - это гибкий способ распространения функций повторного использования компонентов Vue. Объект mixin может содержать любые параметры компонента. Когда компонент использует mixin, все параметры в mixin будут "смешаны" с собственными параметрами компонентов.
Итак, вы можете добавить метод в mixin, и он будет доступен во всех компонентах, где mixin будет смешан. См. Следующий пример:
// 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 в основном.
1.I создаем новый файл, где я подключаюсь к конечной точке 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
Я предлагаю создать провайдера 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 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
или где бы вы ни 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
}
Надеюсь это поможет.
Я думаю, что для вашего простого вопроса ответом может быть любой модуль ES6, содержащий функции (эквивалентные методам в классе в ANgular) и напрямую импортирующий их в компоненты с использованием импорта и экспорта ES6. Нет таких сервисов, которые могли бы быть внедрены в компоненты.
Вы можете создать свой собственный сервис, где вы можете разместить все вызовы HTTP-сервера, а затем импортировать его в компоненты, где вы хотите их использовать.
Лучше всего использовать Vuex для сложных приложений управления состоянием, потому что в Vuex вы можете обрабатывать все асинхронные вызовы с помощью действий, которые всегда выполняются асинхронно, а затем зафиксировать мутацию, как только у вас будет результат. Мутация будет напрямую взаимодействовать с состоянием и обновлять это в неизменном виде (что является предпочтительным). Это подход с учетом состояния.
Есть и другие подходы. Но это те, которые я следую в своем коде.