When we have features such as method, computed or watch, that we want to use in more than one component or view, we can create and use mixins to avoid repetitive codes.
In small projects, we can create and import a mixin file for each repetitive feature (method, computed, watch,etc...) and use it. However, as the project grows, creating a mixin file for each feature will cause the mixins folder to swell. Instead of creating many mixin files, we can create a main mixin file per category. It would be a better method to create mixin files according to the scope, collect the mixins in the relevant files, and import only the necessary mixin.
We gathered computed and methods that we use in more than one component/view related to insights under mixins/insights/index.js.
import { mapGetters } from "vuex";
const insightsName = {
computed: {
...mapGetters('insights', [ 'getInsightResults' ]),
insightsNames() {
return this.getInsightResults.map(insight => insight.name);
},
}
}
const insightsByType = {
computed: {
...mapGetters('insights', [ 'getInsightResults' ]),
methods: {
insightsByType(type) {
return this.getInsightResults.filter(insight => insight.type == type);
},
}
}
}
const hasInsight = {
computed: {
...mapGetters('insights', [ 'getInsightResults' ]),
methods: {
hasInsight(id) {
return this.getInsightResults.find(insight => insight.id == id);
},
}
}
}
const priorityCountByType = {
computed: {
...mapGetters('insights', [ 'getInsightResults' ]),
methods: {
priorityCountByType(type) {
return this.getInsightResults.filter(insight => insight.priority == type).length;
},
}
}
}
export {
insightsName,
insightsByType,
hasInsight,
priorityCountByType
}
We have included only the mixins we want to use as follows.
Example usage in template:
<div>Urgent count:{{ priorityCountByType('urgent') }}</div>
Example usage in script:
this.priorityCountByType('urgent')
At the time of writing this article, we used mixins as the best practice. However, we can improve or change solutions over time.
