<p>Andaikan saya mempunyai fungsi boleh gubah vue mudah yang saya mahu gunakan semula beberapa kali sepanjang aplikasi saya. Dalam kes ini, ia mempunyai sifat reaktif (produk, tatasusunan yang mengandungi senarai produk) dan kaedah "tambahProduk" yang menolak elemen baharu ke tatasusunan. </p> <pre class="brush:php;toolbar:false;">fungsi eksport useCart(){ produk const = ref([]) const addProduct() =>{ products.push({item: "Baseball Cap", kuantiti: 1}) } kembali { produk, tambahProduk } }</pre> <p>Ia berfungsi hebat. Walau bagaimanapun, saya ingin menghantar contoh troli boleh gubah ke setiap baris supaya baris itu boleh mengakses "troli" induk melalui "troli" harta. </p> <p>Saya harap perkara berikut berfungsi. Saya percaya "ini" harus merujuk kepada objek yang dipanggil fungsi (contoh troli beli-belah): </p> <pre class="brush:php;toolbar:false;">fungsi eksport useCart(){ produk const = ref([]) const addProduct() =>{ //ini sepatutnya contoh troli boleh digubah? products.push({item: "Tudung Besbol", kuantiti: 1, troli: ini}) } kembali { produk, tambahProduk } }</pre> <p>Walau bagaimanapun, apabila saya menguji dalam komponen menggunakan komposit, nilai "ini" tidak ditentukan: </p> <pre class="brush:php;toolbar:false;">const testCart = useCart testCart.addProduct()</pre> <p>Mengapa "ini" tidak ditakrifkan dalam konteks ini dan bagaimana saya boleh mengakses contoh boleh gubah dalam kaedah boleh gubah? </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>