Vue组合式函数中如何在方法内访问其实例？

为什么this的值是undefined？ #

• 箭头函数无独立this：你用箭头函数定义addProduct，箭头函数不会绑定自己的this，它的this继承自外层useCart函数的作用域。而Vue项目默认启用严格模式，普通函数作用域中的this默认就是undefined，所以这里无法通过this获取组合式实例。
• 调用逻辑不匹配：就算把addProduct改成普通函数，当你通过testCart.addProduct()调用时，this会指向testCart这个返回对象，但箭头函数的特性让你根本没法利用这个机制。

如何在组合式方法内访问实例？ #

你可以在useCart内部先创建要返回的实例对象，通过闭包直接引用这个对象，替代对this的依赖：

写法一：直接在实例中定义方法 #

export function useCart(){
    const products = ref([])

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

    return cartInstance
}

写法二：分开定义方法后挂载 #

export function useCart(){
    const products = ref([])
    let cartInstance

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

    cartInstance = {
        products,
        addProduct
    }

    return cartInstance
}

这两种写法都能让addProduct正确访问到当前的组合式实例，因为我们直接在闭包中引用了cartInstance变量，不受调用方式和this绑定规则的影响。

内容的提问来源于stack exchange，提问作者corycorycory