함수에서 Vue 구성 가능 인스턴스에 액세스하시겠습니까?

Question

애플리케이션 전체에서 여러 번 재사용하려는 간단한 vue 구성 가능 함수가 있다고 가정해 보겠습니다. 이 경우에는 반응형 속성(제품, 제품 목록이 포함된 배열)과 새 요소를 배열에 푸시하는 "addProduct" 메서드가 있습니다.

내보내기 함수 useCart(){
    const 제품 = ref([])

    const addProduct() =>{
        products.push({item: "야구 모자", 수량: 1})
    }

    반품 {
        제품,
        제품 추가
    }
}

매우 잘 작동합니다. 그러나 행이 "cart" 속성을 통해 상위 "cart"에 액세스할 수 있도록 구성 가능한 카트의 인스턴스를 각 행에 전달하고 싶습니다.

다음이 효과가 있기를 바랍니다. 저는 "this"가 함수가 호출되는 개체(장바구니 인스턴스)를 참조해야 한다고 생각합니다.

내보내기 함수 useCart(){
    const 제품 = ref([])

    const addProduct() =>{
        //이것이 장바구니 컴포저블의 인스턴스여야 합니까?
        products.push({item: "야구 모자", 수량: 1, 장바구니: this})
    }

    반품 {
        제품,
        제품 추가
    }
}

그러나 컴포저블을 사용하여 구성요소에서 테스트할 때 'this' 값은 정의되지 않습니다.

const testCart = useCart
testCart.addProduct()

이 컨텍스트에서 'this'가 정의되지 않은 이유는 무엇이며, 구성 가능한 메서드 내에서 구성 가능한 인스턴스에 어떻게 액세스하나요?

Answer 1

제대로 하면 효과가 있을 거예요.

하지만 functions() 而不是 lambda，因为 lambda 没有上下文，并且 this = window코드>

를 사용해야 합니다. 으아악

하지만 .cart 속성에서 this 컨텍스트를 사용하는 데 문제가 있습니다.

는 cart.products.value[0].cart.products와 비슷합니다. 그것은 단지 작동하지 않습니다.

디자인을 다시 생각해보실 것을 제안합니다. 나는 그렇게하지 않을 것입니다.

놀이터를 확인해 보세요. 두 번째는 창이다.

으아악 으아악