Кажется очень неудобным пытаться придерживаться странностей Vuex по вызову методов со строковыми литералами для служб, когда вы могли бы создать класс TypeScript / JS, который содержит состояние и логику для него? Как вы можете использовать класс с отслеживанием состояния в качестве службы в Vue?
Дуглас Гаскелл
VueX не является хорошим решением для внешних интерфейсов, которым требуется контекст, отличный от компонента /, для совместного использования с несколькими компонентами. Служба Angular (2.x +) - прекрасный пример того, как добиться этого без ненужных сложностей и чрезмерной инженерии.
Коди
37
Я использую axios в качестве HTTP-клиента для выполнения вызовов api, я создал gatewaysпапку в своей srcпапке и поместил файлы для каждого бэкэнда, создав экземпляры axios, например , следующие
Как я предполагаю , что вы хотите повторно использовать этот метод в нескольких компонентах, вы можете использовать Примеси из 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')
}
})
Как вы обновите X-Auth-Token myApi.js, когда пользователь войдет в систему
Амарджит Сингх
3
обычно это не статическое значение
Амарджит Сингх
30
Я в основном использую Vue Resource.
1. Я создаю новый файл, в котором я подключаюсь к конечной точке API, используя. Vue.http.xxxИтак, допустим, у нас есть конечная точка, которая выводит сообщения. Создайте новый каталог в вашем проекте, я вызываю его services, а затем создаю файл с именем PostsService.js- контент выглядит так:
По словам Эвана Ю, Vue-Resource уходит на пенсию и вместо этого рекомендует Axios. Прочтите его статью Мне очень нравится ваш подход, который больше похож на angular 2
codely
@noypee VueResource все еще работает, но не забывайте использовать то, что вы хотите, это будет точно такой же подход с Axios.
Belmin Bedak
1
Да, Vue2 продолжит работу с vue-ресурсом, согласно его статье
codely
2
Это очень хорошо, но как протестировать такой компонент с помощью mock-PostsService?
Шрайк
@noypee, vue-resource не удаляется - Эван заявил, что он просто «выводит его из статуса официальной рекомендации» . Далее он пояснил, почему его команда пришла к выводу, что больше нет необходимости в официальной библиотеке AJAX. Связанная статья хорошо это объясняет. И следует отметить, что vue-resource по-прежнему активно поддерживается и является вполне жизнеспособным вариантом.
squidbe
8
Я предлагаю создать поставщика 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:
Я думаю, что на ваш простой вопрос ответом может быть любой модуль ES6, содержащий функции (эквивалентные методам в классе в ANgular) и напрямую импортирующий их в компоненты с использованием импорта и экспорта ES6. Нет таких сервисов, которые можно было бы внедрить в компоненты.
Вы можете создать свою собственную службу, в которой вы можете разместить все вызовы HTTP-сервера, а затем импортировать их в компоненты, где вы хотите их использовать.
Лучше всего использовать Vuex для сложных приложений управления состоянием, потому что в Vuex вы можете обрабатывать все асинхронные вызовы с помощью действий, которые всегда выполняются асинхронно, а затем фиксировать мутацию, как только вы получите результат. Мутация будет напрямую взаимодействовать с состоянием и будет обновляться это неизменным образом (что предпочтительно). Это подход с отслеживанием состояния.
Есть и другие подходы. Но это те, которым я следую в своем коде.
Я использую axios в качестве HTTP-клиента для выполнения вызовов api, я создал
gateways
папку в своейsrc
папке и поместил файлы для каждого бэкэнда, создав экземпляры axios, например , следующиеmyApi.js
Теперь в вашем компоненте у вас может быть функция, которая будет извлекать данные из API, как показано ниже:
Как я предполагаю , что вы хотите повторно использовать этот метод в нескольких компонентах, вы можете использовать Примеси из vue.js:
Таким образом, вы можете добавить метод в миксин, и он будет доступен во всех компонентах, в которых будет смешиваться миксин. См. Следующий пример:
источник
Я в основном использую Vue Resource.
1. Я создаю новый файл, в котором я подключаюсь к конечной точке API, используя.
Vue.http.xxx
Итак, допустим, у нас есть конечная точка, которая выводит сообщения. Создайте новый каталог в вашем проекте, я вызываю егоservices
, а затем создаю файл с именемPostsService.js
- контент выглядит так:Затем я перехожу к компоненту, где хочу использовать эту службу, и импортирую его.
Для получения дополнительной информации об этом подходе, не стесняйтесь проверить мое репо на 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:Затем в вашем
main.js
файле или в другом месте, где вы загружаете приложение Vue, сделайте следующее:Теперь вы можете получить к нему доступ в любом месте вашего приложения Vue, а также везде, где вы импортируете сам Vue:
или:
Надеюсь это поможет.
источник
Я думаю, что на ваш простой вопрос ответом может быть любой модуль ES6, содержащий функции (эквивалентные методам в классе в ANgular) и напрямую импортирующий их в компоненты с использованием импорта и экспорта ES6. Нет таких сервисов, которые можно было бы внедрить в компоненты.
источник
Вы можете создать свою собственную службу, в которой вы можете разместить все вызовы HTTP-сервера, а затем импортировать их в компоненты, где вы хотите их использовать.
Лучше всего использовать Vuex для сложных приложений управления состоянием, потому что в Vuex вы можете обрабатывать все асинхронные вызовы с помощью действий, которые всегда выполняются асинхронно, а затем фиксировать мутацию, как только вы получите результат. Мутация будет напрямую взаимодействовать с состоянием и будет обновляться это неизменным образом (что предпочтительно). Это подход с отслеживанием состояния.
Есть и другие подходы. Но это те, которым я следую в своем коде.
источник