Jak obudować wspólną funkcjonalność w projekcie Vuejs? Najlepsze praktyki

Question

Pracuję z projektem średniej wielkości wykorzystującym Vuejs jako front-end. Opcje, którymi się zajmuję, aby zamknąć/oddzielić wspólne metody, które mogą być używane w wielu komponentach, obejmują podejście i podejście wtyczek.
Podejście Mixin
Muszę napisać instrukcję importu w każdym ze składników (pliku), w którym chcę użyć metody mixin. Czy to zwiększa ostateczny rozmiar pliku, ponieważ mixin zostanie zaimportowany w wielu miejscach? Mogę używać this w ramach metod mixin.

Plugin Podejście
mogę zainstalować wtyczkę globalnie Vue.use(MyPlugin) i korzystać z wtyczki w dowolnej składowej bez importowania wtyczki w każdej z części.
Wada: Nie mogę używać this[field] w ramach metod wtyczek. Muszę przekazać wystąpienie komponentu wywołującego vm, aby użyć takich metod.

Edycja 1 - włączenie Extend Podejście
Extend Podejście
mogę zdefiniować składnik bazowy ze wszystkich metod, które będą miały zastosowanie w wielu innych składników, a następnie przedłużyć ten BaseComponent tworzenie nowych komponentów . Tutaj znowu muszę przejść w instancji składnika dziedziczącego, to użyte w BaseComponent nie odwołuje się do komponentu wywołującego/dziedziczącego.

Proszę znaleźć trywialny przykład kodu podobnego do tego, co używam poniżej:

//mixin.js 
 
    var MyMixin = { 
 
     methods:{ 
 
      getName(){ 
 
       return this.name; 
 
      } 
 
     } 
 
    }; 
 
    export default MyMixin; 
 

 

 
    //plugin.js 
 
    var MyPlugin = {}; 
 

 
    MyPlugin.install = function(Vue, options){ 
 
     var service = { 
 
    \t getTheName(){ 
 
    \t  retrun this.name; 
 
    \t }, 
 
      getTheNameVersion2(vm){ //here vm is the instance of the calling component passed as a parameter - is this proper way? 
 
       return vm.name; 
 
      } 
 
     } 
 
    \t 
 
     Vue.prototype.$service = service; 
 
    }; 
 

 
    export default MyPlugin; 
 

 

 

 
    //my-component.js 
 
    import MyMixin from './mixin'; 
 
    export default{ 
 
     template:require('./my-component-template.html'), 
 
     mixins:[MyMixin], 
 
     data(){ 
 
      return{ 
 
    \t  name:'John Doe' 
 
    \t } 
 
     }, 
 
     methods:{ 
 
      displayNameFromMixin(){ 
 
       console.log(this.getName()); //displays John Doe - using the mixin method. 
 
      }, 
 
      displayNameFromPlugin(){ 
 
       console.log(this.$service.getTheName()); //error "this" references the plugin instead of the component instance 
 
      }, 
 
      displayNameFromPluginVersion2(){ 
 
       console.log(this.$service.getTheNameVersion2(this)); //this works - passing the instance as method parameter 
 
      } 
 
    } 
 
    
 
    //base-component.js 
 
    export default{ 
 
     methods:{ 
 
      getName(vm){ 
 
       return vm.name; 
 
      } 
 
     } 
 
    } 
 
    
 
//another-component.js 
 
import BaseComponent from './base-component'; 
 
BaseComponent.extend({ 
 
    template:require('./another-component-template.html'), 
 
    data(){ 
 
     return{ 
 
      name:'Jack Daniels'; 
 
     } 
 
    }, 
 
    methods:{ 
 
     getNameFromBaseComponent(){ 
 
      console.log(this.getName(this)); //displays Jack Daniels - instance passed as method parameter 
 
     } 
 
    } 
 
}); 
 

 

 
    //main.js 
 

 
    import Vue from 'vue'; 
 
    import MyPlugin from './plugin'; 
 
    import MyComponent from './my-component'; 
 
    import AnotherComponent from './another-component'; 
 

 
    Vue.use(MyPlugin); 
 

 
    new Vue({ 
 
     el:'body', 
 
     components:{ 
 
      MyComponent, AnotherComponent 
 
     } 
 
    });

Moje pytania:

1. Importowanie wstawionej plik w każdym składniku (który wymaga metod) czy jest to skuteczny sposób robienia tego?
   Czy importowanie mixin w wielu miejscach (pliki komponentowe) obejmuje wielokrotny kod pliku mixin i zwiększenie rozmiaru pliku?

2. Przekazywanie instancji wywołującego komponentu vm = this jako parametru - czy jest to dobra praktyka? Czy pomijanie instancji składnika jako parametrów metody powoduje problemy z wydajnością?

3. Jak powiązać this (instance of the calling/inheriting component) do metod wewnątrz wtyczki i/lub BaseComponent tak że this odnosi się do powołania/dziedziczenie instancję składnika zamiast wtyczki/BaseComponent?

4. Które podejście jest najbardziej skuteczne pod względem wydajności, OSUSZANIA i rozmiaru pliku?

Answer 1

co wolę (ktoś uważa, że ​​nie jest to najlepszy sposób, ale dla mnie wystarcza) to tworzenie wtyczek.

Mam więc plik o nazwie vue-utils.js z zawartością (na przykład):

; (function() { 
    var install = function(Vue, options) { 
     Vue.prototype.$utils = {} 

     var vm = new Vue({ data: Vue.prototype.$utils }); 

     Vue.prototype.$utils.validateEmail = function(value) { 
      return /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(value); 
     } 
    } 

    if (typeof exports == 'object') { 
     module.exports = install; 

    } else if (typeof define == 'function' && define.amd) { 
     define([], function() { return install }); 

    } else if (window.Vue) { 
     Vue.use(install); 
    } 
})(); 

zdefiniować dolarów utils, a następnie utworzyć nową instancję Vue z nim więc przekształcić dowolny obiekt do zbindowanych, a następnie zdefiniować kolejne właściwości i metody.

Następnie załadować go w aplikacji w ten sposób:.

import VueUtils from './plugins/vue-utils.js'; 
Vue.use(VueUtils); 

I będziesz w stanie dotrzeć do komponentu w HTML jak $ utils oraz w JS przez to $ Utils