Références de modèles Vue 3 dans les composables

Question

Je souhaite passer de l'API d'options à l'API de composition et utiliser des composables au lieu de mixins. Jusqu'à présent, j'ai utilisé un mixin global avec des propriétés calculées comme celle-ci :

// globalMixin.js

 computed: {
    myAlert() {
        return this.$refs.myAlertDiv;
    }
 }

Ensuite j'ai utilisé ce mixin lors de la création de l'application :

// MyApp.js

const MyApp = {
   mixins: [globalMixin]
...
}

myAlert devient une propriété calculée de MyApp et je peux l'utiliser sans la déclarer directement dans la propriété MyApp.

Maintenant, je veux obtenir le même résultat en utilisant des composables, disons que j'ai un composant qui importe des composables :

// App.vue

<script setup>
import { useGlobalComposable} from './globalComposable.js';

const globalComposable = useGlobalComposable();

onMounted(() => {

// should work without declaring myAlert inside App.vue
console.log(globalComposable.myAlert);
})
...
</script>

Est-ce que ça va ? Si oui, comment dois-je déclarer la référence du modèle myAlert dans le composable ?

Answer 1

Votre useGlobalComposable 函数应返回 myAlert, comme indiqué ci-dessous :

const useGlobalComposable = function() { 
  
   const myAlertDiv = ....

   const myAlert = computed(() => {
        return myAlertDiv;
    });

   return {myAlert}
  }

Ensuite, vous pouvez déclarer myAlert dans le bloc des paramètres

const { myAlert } = useComposable();   
 return { myAlert }

Veuillez noter que mixin 中的 this.$refs 不能直接与 Composition API 一起使用。如果您创建组件，则可以使用 this accède aux propriétés et méthodes des composants.

Ceci est un article sur l'utilisation de refs avec l'API Composition.

Exemple de travail très simple utilisant des composables dans 设置 :

 const { ref, reactive, createApp } = Vue;
 
 const useComposable = function() { 
  const test = ref(1);
  return { test }; 
 }
 
 const App = { 
   setup() {    
      const { test } = useComposable();   
      return { test }
   }
}
 
 const app = createApp(App)
 app.mount('#app')

<div id="app">
  <div>Test: {{ test }}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>