Vue 3 更新状态不会导致重新渲染答案

【问题标题】：Vue 3 updating a state does not cause rerenderVue 3 更新状态不会导致重新渲染
【发布时间】：2022-12-21 05:09:28
【问题描述】：

我有一个在 vue 3 中创建的自定义挂钩：那有一个功能：

  const cart = reactive([])

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

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

const { cart } = useCart()

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

知道我能做什么吗？谢谢

【问题讨论】：

你能更详细地解释你想要达到的目标吗？您在哪里使用 useCart，您使用的是选项还是组合 api、脚本设置等。
我实际上设法解决了它，我发布了我所做的

标签： vuejs3

【解决方案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 但这并不重要。

【讨论】：