Accéder à l'instance composable de Vue en fonction ?

Question

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.

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()

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 ?

Answer 1

Si vous le faites correctement, cela fonctionnera.

Mais vous devez utiliser functions() 而不是 lambda，因为 lambda 没有上下文，并且 this = windowcode>

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

Mais j'ai du mal à utiliser le contexte this dans l'attribut .cart.

est similaire à cart.products.value[0].cart.products. Cela ne fonctionne tout simplement pas.

Je vous propose de repenser le design. Je ne ferai pas ça.

Découvrez l'aire de jeux. La deuxième fois, c'est la fenêtre.

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>