Sto lavorando con un progetto di medie dimensioni che utilizza Vuejs come front-end. Le opzioni che sto esplorando per incapsulare/separare i metodi comuni che possono essere usati in molti componenti includono l'approccio del mixin e l'approccio al plugin.
Metodo di miscelazione
Devo scrivere una dichiarazione di importazione in ciascun componente (file) in cui desidero utilizzare i metodi di mixaggio. Aumenta la dimensione del file finale in quanto il mixin verrà importato in più punti? Posso usare this all'interno dei metodi di mixin.Come incapsulare la funzionalità comune in un progetto Vuejs? Best Practice
plugin Approach
posso installare il plugin globalmente con Vue.use(MyPlugin) e utilizzare il plug in qualsiasi componente senza importare il plug in ogni componente.
Svantaggio: Non sono in grado di utilizzare this[field] all'interno dei metodi del plugin. Devo passare l'istanza del componente chiamante vm per utilizzare tali metodi.
Edit 1 - per includere estendere Approccio
Estendere approccio
posso definire un componente di base con tutti i metodi che dovranno utilizzare in molteplici altri componenti e quindi estendere questo BaseComponent per creare nuovi componenti . Anche in questo caso, ho bisogno di passare l'istanza del componente ereditario, questo usato nel BaseComponent non si riferisce al componente chiamante/ereditante.
Si prega di trovare il banale esempio di codice simile a quello che sto usando qui di seguito:
//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
}
});Le mie domande:
l'importazione di file mixin in ogni sua componente (che richiede i metodi) è un modo efficace per farlo?
L'importazione di mix in più posizioni (file componente) include il codice del file mixin ripetutamente e aumenta le dimensioni del file?Passaggio dell'istanza del componente di chiamata
vm = thiscome parametro: è una buona pratica? Il passaggio delle istanze del componente come parametri del metodo causa problemi di efficienza?Come associare
this (instance of the calling/inheriting component)ai metodi all'interno di plug-in e/o BaseComponent in modo chethissi riferisce alla chiamata/ereditare istanza del componente invece di plugin/BaseComponent?- Quale approccio è più efficace in termini di prestazioni, DEUMIDITÀ e dimensioni del file?
Penso che in molti casi questo è desiderabile. Grazie! –