Discussion :

[71yeti]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[gwyohm]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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,
    };
  },
});