javascript - change - Vue.js: define un servicio

vue router title

Question

Estoy viendo Vue.js como una alternativa a Angular y realmente me gusta hasta ahora. Para tener una idea de ello, estoy refactorizando un proyecto angular existente a un proyecto Vue. Estoy justo en el punto donde necesito comunicarme con mi API REST.

En Angular solía definir un servicio para eso, que se inyectaba en cada controlador que lo necesitaba. Vue no parece conocer la construcción del "servicio", según tengo entendido. ¿Cómo se puede lograr esto en Vue?

Consideré vue-resource , pero es solo para las funcionalidades http hasta donde yo entiendo. Como también uso jQuery, esto es obsoleto.

Ejemplo:

Tengo vueComponent1 y vueComponent2 . Ambos necesitan acceso al mismo recurso REST. Para manejar esto, quiero un servicio central, que ambos componentes pueden usar para las solicitudes al recurso REST. Angular tiene el componente ''servicio'', que hace exactamente eso. Vue no lo ha hecho.

Answer 1

De la documentación de Vue.js sobre la creación de aplicaciones a gran escala .

La comunidad ha contribuido con el complemento github.com/vuejs/vue-resource , que proporciona una manera fácil de trabajar con API RESTful. También puede usar cualquier biblioteca de Ajax que desee, por ejemplo, $ .ajax o SuperAgent .

Vue no requiere que sigas una arquitectura específica, ya que solo se refiere a la capa de Vista en una arquitectura MVC o MVVM. Como ya dijo en su respuesta , una buena práctica es usar un cargador de módulos como Browserify o Webpack para que pueda crear sus "servicios" en archivos separados, importándolos donde lo necesite. Es muy fácil estructurar su aplicación con un cargador de módulos usando vue-cli .

De hecho, personalmente me gusta mucho la arquitectura Flux para aplicaciones basadas en componentes, luego le recomiendo que eche un vistazo a Vuex , una arquitectura de aplicaciones inspirada en Flux que está diseñada específicamente para administrar el estado dentro de las aplicaciones Vue.js.

De esta manera, puede crear acciones que usen vue-resource para solicitar su API, luego puede enviar mutaciones cuando lleguen los datos, con todos los componentes que necesitan esos datos ya vinculados al estado global, reaccionando automáticamente. En otras palabras, sus componentes en sí no necesitan llamar a los servicios, solo reaccionan a los cambios de estado enviados por las mutaciones.

Answer 2

De la documentación de Vue.js.

Vue.js en sí no es un marco completo, se centra solo en la capa de vista.

Como una biblioteca que se centra en la V de MVC, no proporciona cosas como servicios.

¿Está utilizando algún tipo de cargador de módulos como Browserify o Webpack?
Luego, puede aprovechar el sistema de módulos de ES6 para crear un servicio por sí mismo.
Todo lo que tiene que hacer es crear una clase JavaScript simple que este nuevo módulo esté exportando.

Un ejemplo podría verse así:

export default class RestResource {

  sendRequest() {
    // Use vue-resource or any other http library to send your request
  }

}

Dentro de sus componentes vue 1 y 2 puede usar este servicio importando la clase.

import RestResource from ''./services/RestResource'';

const restResourceService = new RestResource();

restResourceService.sendRequest();

Answer 3

Puede configurar el recurso vue globalmente como

Vue.http.options.root = "your base url"

y ahora en cada llamada http simplemente puede llamar por el nombre del recurso:

this.$http.get('''');
this.$http.get(''users'')

Answer 4

Puede exportar la instancia de una clase para su servicio:

export default new class {
   ...
}

En su componente, o en cualquier otro lugar, puede importar la instancia y siempre obtendrá la misma. De esta manera, se comporta de manera similar a un servicio angular inyectado, pero sin usar this .

import myService from ''../services/myservice'';

Vue.component(''my-component'', {
  ...
  created: function() {
    myService.oneFunction();
  }
  ...
})

Answer 5

Si no está utilizando un cargador de módulos, puede definir un plugin personalizado. Algún código de ejemplo:

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

También puede conectar otras bibliotecas, esta publicación muestra cómo conectar axios.js

Answer 6

Tiene algunas respuestas muy buenas en esta pregunta ¿Cuál es el equivalente del Servicio Angular en VueJS?

Como @Otabek Kholikov dice allí, tiene 4 opciones:

1. Servicio sin estado: entonces debes usar mixins
2. Servicio completo: use Vuex
3. Servicio de exportación e importación desde un código vue
4. cualquier objeto global javascript

En mis proyectos prefiero (4). Me da la máxima flexibilidad y solo tiene las implementaciones que necesito (no traigo, por ejemplo, Vuex y no debería ser estricto con sus reglas y no hay "magia": todo el código es mío). Tiene un ejemplo de implementación en la pregunta que mencioné anteriormente.