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

Question

Nous migrons initialement notre application de Vue2 vers Vue3, certains composants ont des mixins ajoutés et je veux savoir comment ajouter ces mixins dans Vue3. J'ai essayé plusieurs solutions mais je n'ai pas trouvé de hook spécial correspondant à `mixins : []` dans `export default` dans Vue2.

P粉242126786 · Answer

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.