Zugriff auf die zusammensetzbare Vue-Instanz in Funktion?

Question

Angenommen, ich habe eine einfache zusammensetzbare Vue-Funktion, die ich in meiner Anwendung mehrmals wiederverwenden möchte. In diesem Fall verfügt es über eine reaktive Eigenschaft (Produkte, ein Array mit einer Liste von Produkten) und eine Methode „addProduct“, die neue Elemente in das Array schiebt.

Exportfunktion useCart(){
    const Produkte = ref([])

    const addProduct() =>{
        products.push({item: "Baseball Cap", Menge: 1})
    }

    zurückkehren {
        Produkte,
        Produkt hinzufügen
    }
}

Es funktioniert großartig. Allerdings möchte ich jeder Zeile eine Instanz des zusammensetzbaren Warenkorbs übergeben, damit die Zeile über die Eigenschaft „cart“ auf den übergeordneten „cart“ zugreifen kann.

Ich hoffe, dass das Folgende funktioniert. Ich glaube, „dies“ sollte sich auf das Objekt beziehen, für das die Funktion aufgerufen wird (die Warenkorb-Instanz):

Exportfunktion useCart(){
    const Produkte = ref([])

    const addProduct() =>{
        //Dies sollte die Instanz des zusammensetzbaren Warenkorbs sein?
        products.push({item: "Baseball Cap", Menge: 1, Warenkorb: this})
    }

    zurückkehren {
        Produkte,
        Produkt hinzufügen
    }
}

Wenn ich jedoch eine Komponente mit Composables teste, ist der Wert von „this“ undefiniert:

const testCart = useCart
testCart.addProduct()

Warum ist „this“ in diesem Kontext nicht definiert und wie greife ich auf die zusammensetzbare Instanz innerhalb der zusammensetzbaren Methode zu?

Answer 1

如果你做得对，那么它就会起作用。

但是您必须使用 functions() 而不是 lambda，因为 lambda 没有上下文，并且 this = window代码>

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

但我很难使用 .cart 属性中的 this 上下文。

类似于cart.products.value[0].cart.products。它就是行不通。

我建议您重新考虑设计。我不会那样做。

检查操场。第二次是窗口。

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>