<p>Supposons que j'ai une simple fonction composable vue que je souhaite réutiliser plusieurs fois dans mon application. Dans ce cas, il possède une propriété réactive (products, un tableau contenant une liste de produits) et une méthode "addProduct" qui pousse les nouveaux éléments vers le tableau. </p> <pre class="brush:php;toolbar:false;">fonction d'exportation useCart(){ const produits = ref([]) const addProduct() =>{ products.push({article : "Casquette de baseball", quantité : 1}) } retour { des produits, ajouter un produit } }</pré> <p>Ça fonctionne très bien. Cependant, je souhaite transmettre une instance du panier composable à chaque ligne afin que la ligne puisse accéder au « panier » parent via la propriété « panier ». </p> <p>J'espère que les résultats suivants fonctionneront. Je pense que "ceci" devrait faire référence à l'objet sur lequel la fonction est appelée (l'instance du panier): </p> <pre class="brush:php;toolbar:false;">fonction d'exportation useCart(){ const produits = ref([]) const addProduct() =>{ //cela devrait être l'instance du composable cart ? products.push({article : "Casquette de baseball", quantité : 1, panier : ceci}) } retour { des produits, ajouter un produit } }</pré> <p>Cependant, lorsque je teste un composant utilisant des composables, la valeur de "this" n'est pas définie : </p> <pre class="brush:php;toolbar:false;">const testCart = useCart testCart.addProduct()</pre> <p>Pourquoi « ceci » n'est-il pas défini dans ce contexte et comment puis-je accéder à l'instance composable à l'intérieur de la méthode composable ? </p>

const addProduct = function() {
    //this should be the instance of the cart composable?
    products.value.push({item: "Baseball Cap", quantity: 1, cart: this})
}

const { ref } = Vue;

const useCart = function() {
    const products = ref([])
    const addProduct1 = function() {
        //this should be the instance of the cart composable?
        products.value.push({item: "Baseball Cap", quantity: 1, cart: this})
    }
    const addProduct2 = () => {
        //this should be the instance of the cart composable?
        products.value.push({item: "Baseball Cap", quantity: 1, cart: this})
    }
    return {
        products,
        addProduct1,
        addProduct2
    }
}

const cart = useCart();
cart.addProduct1();
console.log(cart.products.value[0].cart)
cart.addProduct2();
console.log(cart.products.value[1].cart)

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>