Akses contoh boleh gubah vue dalam fungsi?

Question

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.

fungsi eksport useCart(){
    produk const = ref([])

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

    kembali {
        produk,
        tambahProduk
    }
}

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.

Saya harap perkara berikut berfungsi. Saya percaya "ini" harus merujuk kepada objek yang dipanggil fungsi (contoh troli beli-belah):

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
    }
}

Walau bagaimanapun, apabila saya menguji dalam komponen menggunakan komposit, nilai "ini" tidak ditentukan:

const testCart = useCart
testCart.addProduct()

Mengapa "ini" tidak ditakrifkan dalam konteks ini dan bagaimana saya boleh mengakses contoh boleh gubah dalam kaedah boleh gubah?

Answer 1

Jika anda melakukannya dengan betul, ia akan berkesan.

Tetapi anda perlu menggunakan functions() 而不是 lambda，因为 lambda 没有上下文，并且 this = windowkod>

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

Tetapi saya menghadapi masalah menggunakan konteks this dalam atribut .cart.

serupa dengan cart.products.value[0].cart.products. Ia hanya tidak berfungsi.

Saya cadangkan anda memikirkan semula reka bentuk. Saya tidak akan berbuat demikian.

Lihat taman permainan. Kali kedua ialah tingkap.

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>