Vue.js: definir um serviço
em Angular eu costumava definir um serviço para isso, que foi injectado em todos os controladores em necessidade. O Vue não conhece a constante de "serviço" que eu entenda. Como é que isso pode ser conseguido em Vue? Até agora não consegui encontrar um bom aproxima-te para isto.
o Vue-resource é apenas para funcionalidades http que eu entenda. Como também uso jQuery, isto é obsoleto.
Exemplo:
tenho vueComponent1 e vueComponent2. Ambos precisam de acesso ao mesmo recurso de descanso. Para lidar com isso eu quero um serviço central, que ambos os componentes podem usar para pedidos para o recurso restante. Angular tem o componente "serviço", o que exatamente faz isso. O Vue não o fez.
4 answers
Do Vue.documentação js.
Como biblioteca focada no V da MVC, não fornece coisas como serviços.Vue.js em si não é um framework completo-ele está focado apenas na camada de visão.
Estás a usar algum tipo de carregador de módulos como o Browserify ou o Webpack?
Então você pode alavancar o sistema de módulos do ES6 para criar um serviço sozinho.
Tudo o que você tem a fazer é criar uma classe JavaScript simples que está sendo exportado por este novo módulo.
Um exemplo pode ser parecido com este:
export default class RestResource {
sendRequest() {
// Use vue-resource or any other http library to send your request
}
}
Dentro do seu componente vue 1 e 2 pode utilizar este serviço importando a classe.
import RestResource from './services/RestResource';
const restResourceService = new RestResource();
restResourceService.sendRequest();
Do Vue.documentação js sobre criação de aplicações em grande escala .
A comunidade contribuiu com o plugin vue-resource, que proporciona uma forma fácil de trabalhar com APIs repousantes. Você também pode usar qualquer biblioteca Ajax que você gosta, por exemplo $.ajax ou superagente .
O Vue não requer que siga uma arquitectura específica, uma vez que se refere apenas à camada de visualização numa arquitectura MVC ou MVVM. Como @Marc já disse em seu resposta , uma boa prática é usar um carregador de módulos como o Browserify ou o Webpack para que possa criar os seus "serviços" em ficheiros separados, importando-os onde precisar. É muito fácil estruturar o seu aplicativo com um carregador de Módulo usando vue-cli .
Realmente, eu pessoalmente gosto muito da arquiteturaFlux para aplicações baseadas em componentes, então eu recomendo que você dê uma olhada em Vuex , uma arquitetura de aplicações inspirada em fluxo que é projetado especificamente para gerir o estado dentro da Vue.aplicações js.
Desta forma, você pode criar ações que usem o vue-resource para solicitar a sua API, então você pode enviar mutações quando os dados chegam, com todos os componentes que precisam desses dados já ligados ao estado global, reagindo automaticamente. Em outras palavras, seus próprios componentes não precisam chamar os Serviços, eles apenas reagem às mudanças de Estado enviadas por mutações.
Como diz @Otabek Kholikov - você tem 4 opções:
- Serviço apátrida: então deve utilizar mixinas
- Serviço completo: utilizar Vuex
- Serviço de exportação e importação a partir de um código vue
- qualquer objecto global javascript
Nos meus projectos Prefiro (4). Dá-me a máxima flexibilidade e tem apenas as implementações I need (I don't bring for example Vuex and should not be strict to its rules and there is no "magic" - all code is mine). Tem um exemplo de implementação na Pergunta acima mencionada.
Se não estiver a usar um carregador de módulos, poderá definir um plugin personalizado . Algum código de exemplo:
var myPlugin = {
install: function (Vue, options) {
//private
var myPrivateProperty = 'Private property';
//instance properties and methods
Vue.prototype.$myPublicProperty = 'Public Property';
Vue.prototype.$myAddedMethod = function () {
return myPrivateProperty;
};
Vue.prototype._getData = function (url) {
return url;
};
//static properties and methods
Vue.myStaticProperty = 'My static prop';
Vue.myStaticMethod = function () {
console.log('in');
}
}
};
Vue.use(myPlugin);
new Vue({
el: '#app',
created: function () {
//using instance
console.log(this.$myAddedMethod());
console.log('my get data: ' + this._getData('some url'));
console.log(this.$myPublicProperty);
//using static
console.log(Vue.myStaticProperty);
Vue.myStaticMethod();
}
});
Você também pode ligar-se a outras bibliotecas, este post mostra como ligar-se a axios.js