Vue 3 Mutualisation d'actions de type watch

Bonjour,
Je migre une application de vue2 à vue3.
J'ai un composant qui porte des fonctions de type watch sur différentes variables : lang, route.query, ...

Ce composant est utilisé par 4 ou 5 pages vue qui vont afficher chacune des éléments spécifiques.

J'utilise la composition API.
J'ai essayer via extends, mais sans succès.

Mon composant partagé est structuré comme suit

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

export default defineComponent({ Name : "Base", Setup() { const languageStateStr = computed (() => getLocale(i18n as I18n)); const routeQueryLang = computed (() => route.query.lang)   const onLanguageChanged = () => { console.log("onLanguageChanged") }   watch(routeQueryLang, onLanguageChanged, {immediate: true}); watch(languageStateStr,onLanguageChanged);   return { languageStateStr, routeQueryLang, onLanguageChanged }; } });

---

Je voudrais utiliser ce composant dans un composant du type

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import { defineComponent } from "vue"; import Base from "./base";   export default defineComponent({ name: "Rules", components: { Page, Rulebooks, }, setup() { console.log("Rules: setup"); const selectedType = MenuItemType.RULES;   return { selectedType, }; }, });

---

Comment peut-on faire pour avoir cette mutualisation ?

Merci pour vos idées !

hello,

je pense que ce que tu cherches à faire est expliqué ici https://vuejs.org/guide/reusability/composables.html

dans ton cas, tu cherches probablement à faire quelque chose comme

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// useBase.js   export default function useBase() { const languageStateStr = computed (() => getLocale(i18n)); const routeQueryLang = computed (() => route.query.lang)   const onLanguageChanged = () => { console.log("onLanguageChanged") }   watch(routeQueryLang, onLanguageChanged, {immediate: true}); watch(languageStateStr, onLanguageChanged);   return { languageStateStr, routeQueryLang, }; }

---

et dans tes composants qui en ont besoin

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// Rules.vue   import { defineComponent } from "vue"; import useBase from "./useBase";   export default defineComponent({ name: "Rules", components: { Page, Rulebooks, }, setup() { console.log("Rules: setup"); const selectedType = MenuItemType.RULES;   const { languageStateStr, routeQueryLang, } = useBase();   return { languageStateStr, routeQueryLang, selectedType, }; }, });

---