Vue 3更新状态不会导致呈现

Question

我在vue 3中创建了一个自定义钩子:它有一个功能:

const cart = reactive([])
const setCart = (productId) => {
cart.push({
qty: 1,
productId 
}) 
}

但是，当我在另一个组件中使用这个钩子时:

const { cart } = useCart()

并使用它来呈现列表，cart是过时的，没有反应性。我来自react背景，通常只会调用setState，但我没有看到类似的东西，所以我使用push。

你知道我能做什么吗?由于

Answer 1

const cart = ref([])
export default function useCart() {
const setCart = (productId) => {
cart.value = [...cart.value, {
qty: 1,
productId
}]
}

return { cart, setCart }
}

我通过全局声明cart变量而不是在useCart函数中声明它来解决前面列出的问题。请注意，这里我使用ref而不是reactive，但这并不重要。