Como encapsular a funcionalidade comum em um projeto Vuejs? Melhor prática
Estou trabalhando com um projeto de tamanho médio utilizando o Vuejs como front-end. As opções que estou explorando para encapsular / separar os métodos comuns que podem ser usados em muitos componentes incluem a abordagem de mixins e a abordagem de plugins.
Abordagem Mixin
Eu tenho que escrever uma declaração de importação em cada um dos componentes (arquivo) onde eu quero usar os métodos mixin. Isso aumenta o tamanho final do arquivo, pois o mixin será importado em vários locais? Eu posso usarthis
dentro dos métodos mixin.
Abordagem de plug-ins
Eu posso instalar o plugin globalmente comVue.use(MyPlugin)
e use o plug-in em qualquer componente sem importar o plug-in em cada componente.
Desvantagem: não consigo usarthis[field]
dentro dos métodos de plug-in. Eu tenho que passar a instância do componente de chamadavm
para usar esses métodos.
Edição 1 - para incluir a abordagem de extensão
Estender abordagem
Posso definir um componente base com todos os métodos que serão usados em vários outros componentes e depois estender esse BaseComponent para criar novos componentes. Aqui, novamente, eu preciso passar na instância do componente de herança, isso usado no BaseComponent não se refere ao componente de chamada / herança.
Por favor, encontre o exemplo trivial de código semelhante ao que estou usando abaixo:
//mixin.js
var MyMixin = {
methods:{
getName(){
return this.name;
}
}
};
export default MyMixin;
//plugin.js
var MyPlugin = {};
MyPlugin.install = function(Vue, options){
var service = {
getTheName(){
retrun this.name;
},
getTheNameVersion2(vm){ //here vm is the instance of the calling component passed as a parameter - is this proper way?
return vm.name;
}
}
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{
name:'John Doe'
}
},
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
}
});
Minhas perguntas:
Importar arquivo mixin em todos os componentes (o que requer os métodos) é uma maneira eficiente de fazer isso?
A importação de mixin em vários locais (arquivos de componentes) inclui o código do arquivo mixin repetidamente e aumenta o tamanho do arquivo?
Passando a Instância do Componente de Chamadavm = this
como parâmetro - é uma boa prática? A transmissão de instâncias de componentes como parâmetros de método causa algum problema de eficiência?
Como vincularthis (instance of the calling/inheriting component)
aos métodos dentro do plug-in e / ou BaseComponent para quethis
refere-se à instância do componente de chamada / herança em vez de plugin / BaseComponent?