Tengo dos componentes Vue con el mismo método (copiar y pegar). Me gustaría evitar esa duplicación y estoy buscando la mejor manera de hacerlo. Tenga en cuenta que el método usa estado mapeado y acciones de Vuex.

Terminé creando un componente Renderless con el siguiente esquema:

 <script> import { mapState, mapActions } from 'vuex'; export default { name: "CommonHandler", render: () => null, props: { prop: { type: User, required: true, }, }, methods: { ...mapActions({ mapAction1: "mappings/mapAction", }), commonMethod() { /*Use computed variables and actions...*/ }, }, computed: { ...mapState({ users: state => state.users, }), currentUser() { return this.users.find( element => element.id === this.prop.id ); }, }, }; </script>

Luego, en esos dos componentes, creo una instancia del componente anterior, le agrego una ref y simplemente llamo al método común de esta manera:

this.$refs.commonComponent.commonMethod();

¿Es esta una buena manera de resolver este problema?