Estoy mirando Vue.js como una alternativa a la Angulares y realmente me gusta hasta ahora.
Para conseguir una sensación para él, yo soy de refactorización existente Angular del proyecto a un Vue proyecto. Estoy justo en el punto donde tengo que comunicarme con mi API de REST.

Angular he utilizado para definir un servicio para que, que se inyecta en cada controlador que necesitaba. Vue no parece saber el «servicio» construir como yo lo entiendo. Cómo se consigue esto en Vue?

He considerado vue-resource, pero es solo para http funcionalidades como tengo entendido. Como puedo usar jQuery demasiado, esta es obsoleta.

Ejemplo:

He vueComponent1 y vueComponent2. Ambas tienen el mismo acceso al RESTO de recursos. Para manejar esto, quiero un servicio central, que tanto de los componentes que se pueden utilizar para las solicitudes para el RESTO de los recursos. Angular tiene el ‘servicio’ componente, que hace exactamente eso. Vue no.

  • Proporcionar un ejemplo concreto de lo que usted necesita. http es suficiente para comunicarse con el RESTO
  • Eche un vistazo a vue-los recursos: github.com/vuejs/vue-resource
InformationsquelleAutor Herr Derb | 2016-07-21

6 Comentarios

  1. 82

    De la Vue.js documentación.

    Vue.js sí, no es un verdadero marco en el que se centra en la capa de la vista solamente.

    Como una biblioteca, centrándose en la V de MVC no facilitará las cosas a como de servicios.

    Está utilizando algún tipo de cargador de módulo como Browserify o Webpack?

    A continuación, puede aprovechar el sistema de módulos de ES6 para crear un servicio de todo por ti mismo.

    Todo lo que tienes que hacer es crear una llanura clase JavaScript que está siendo exportado por este nuevo módulo.

    Un ejemplo podría tener este aspecto:

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

    Dentro de su vue componente 1 y 2 puede utilizar este servicio por la importación de la clase.

    import RestResource from './services/RestResource';
    
    const restResourceService = new RestResource();
    
    restResourceService.sendRequest();
    • Gracias por la cita. Esto significa que no existe una estructura o nada por debajo de la vista y el modelo. Si quiero tener un servicio, necesito construir mi propia utilizando, por ejemplo, puro JS.
    • Me estoy poniendo movieslist.vue?1be4:38Uncaught TypeError: _resource.Resource is not a constructor cuando yo uso este…
    • Podría usted indicar el código que es el que produce la mensaje de error?
    • ese error que fue resuelto por la eliminación de ‘default’ . ahora sólo tengo que averiguar cómo instalar vue-recurso 🙂 (estoy usando el cli con webpack)
    • En ese caso, esto debería ser útil: github.com/vuejs/vue-resource/blob/master/docs/…
    • Le falta una significativa diferencia de lo que cabría esperar con un Angular de fondo. El «servicio» se crea una instancia en múltiples ocasiones en este caso, mientras que en el servicio compartido de la inyección, sólo una instancia se pasa
    • Sí, consigue varias instancias de la misma de esta manera. Eso no es un problema cuando se hace una petición Ajax (simplemente ineficientes), pero cuando se utiliza el servicio para que su modelo de datos, deberá crear una instancia donde se declara el servicio, y sólo la exportación de la instancia.

  2. 19

    De la Vue.js documentación en La Construcción A Gran Escala De Aplicaciones.

    La comunidad ha contribuido a la vue-recursos plugin, que proporciona una manera fácil de trabajar con APIs RESTful. También puede utilizar cualquier biblioteca de Ajax que te gusta, por ejemplo,$.ajax o SuperAgent.

    Vue no requiere que usted siga una arquitectura específica, ya que sólo se refiere a la capa de la Vista en un MVC o MVVM arquitectura. Como @Marc ya se dijo en su respuesta, una buena práctica es usar un cargador de módulo como Browserify o Webpack así que usted puede crear sus «servicios» en archivos separados, la importación de ellos de donde usted los necesita. Es muy fácil para la estructura de tu aplicación con un módulo gestor de usar vue-cli.

    De hecho, yo personalmente gusta mucho el Flujo arquitectura para el componente basado en las aplicaciones, entonces le recomiendo que le eche un vistazo a Vuex, un Flujo inspirado en la arquitectura de aplicación que se ha diseñado específicamente para la gestión de estado de interior Vue.js apps.

    De esta manera, usted puede crear Acciones que se utilice vue-los recursos para solicitar su API, a continuación, usted podrá enviar Mutaciones cuando llegan los datos, con todos los componentes que necesita que los datos que ya enlazado el Estado global, reaccionando de forma automática. En otras palabras, los componentes en sí mismo no necesita llamar a los servicios, que sólo reaccionan a los cambios de Estado enviado por Mutaciones.

    • Sólo una nota que vue-recurso ya no está oficialmente catalogado recomendado. fuente
    • Consulte los detalles: Retirarse vue-los recursos escrito por Evan Usted
  3. 10

    Usted tiene algunas muy buenas respuestas en esta pregunta ¿Cuál es el equivalente de Angular de Servicio en VueJS?

    Como @Otabek Kholikov dice allí – tienes 4 opciones:

    1. Apátridas servicio: a continuación, usted debe utilizar los mixins
    2. Statefull servicio: uso Vuex
    3. Servicio de exportación e importación de un vue código
    4. cualquier javascript objeto global

    En mis proyectos, yo prefiero (4). Me da la máxima flexibilidad y sólo tiene las implementaciones necesito (no traigo por ejemplo Vuex y no debe ser estricto de sus reglas y no hay «magia» – todo el código es mío). Tienes un ejemplo de aplicación en la Pregunta que he mencionado anteriormente.

  4. 9

    Puede exportar la instancia de una clase para el servicio:

    export default new class {
       ...
    }

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

    import myService from '../services/myservice';
    
    Vue.component('my-component', {
      ...
      created: function() {
        myService.oneFunction();
      }
      ...
    })
    • yo estaba buscando esto, es incluso un comentario en respuesta
  5. 5

    Si usted no está utilizando un cargador de módulo, puede definir una costumbre plugin. El 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 en otras bibliotecas, este post muestra cómo conectar axios.js

  6. 0

    Puede configurar vue de recursos a nivel mundial, como

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

    y ahora en cada llamada http puede simplemente llamar por el nombre de recurso –

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

Dejar respuesta

Please enter your comment!
Please enter your name here