Migration de Vue2 vers Vue3 - Comment mettre à jour les mixins ajoutés aux composants Vue2 dans l'API de configuration de Vue3.

Question

Récemment, nous avons commencé à migrer notre application de Vue2 vers Vue3, et des mixins ont été ajoutés à certains composants. J'aimerais savoir comment ajouter ces mixins dans Vue3.

J'ai essayé plusieurs solutions mais je n'en ai pas trouvé de spéciale correspondant à `export default { nom : "Modal", composants : { Loader }, mixins : [] }` dans le hook Vue2. Comment ajouter un mixin ?

Answer 1

Dans Vue 3, vous pouvez toujours utiliser les mixins de la même manière que Vue 2 lorsque vous utilisez l'API Options.

const mixin = {
  created() { console.log('Mixin'); },
};

export default {
  name: "Modal",
  components: { Loader },
  mixins: [mixin]
};

Mais pour l'API de composition, vous devez utiliser des fonctions composables au lieu de mixins :

// Composable declaration function
import { onMounted } from 'vue';

export function useMixin() {
  onMounted(() => console.log('Mixin'));
  return {};
}

// In your component
import { useMixin } from './mixin';
import Loader from './Loader';

export default {
  name: "Modal",
  components: { Loader },
  setup() {
    useMixin();
    return {};
  },
};

Les fonctions combinables offrent une alternative plus claire et plus flexible aux mixins lors de l'utilisation de l'API de composition de Vue 3.