除非在函数范围内再次声明，否则在 composition-api setup() 中声明的 const 变量不会更改答案

【问题标题】：Const variable declared in composition-api setup() not altered unless declared again within function scope除非在函数范围内再次声明，否则在 composition-api setup() 中声明的 const 变量不会更改
【发布时间】：2021-10-12 11:24:21
【问题描述】：

作为一名后端开发人员，我对前端很陌生，所以我很确定我仍然缺少一两个概念。但是，我一直无法找到解决此问题的方法。

我在 Vue(3) 中有一个组件，它从其父组件接收一个 prop（一个数组）。我将此道具传递给 const 变量，以便我可以更改它，因为道具不是直接可变的。我正在使用组合 API，所以我在 setup(props) 函数的开头声明了 const 。在这个设置函数中，我有一个排序函数，我可以在其中更改道具的内容。我拼接数组（将其清空）并从后端获取新内容并将它们推送到数组中。

这似乎不起作用。但是，当我在排序函数本身中声明 const 时，它确实有效。以下示例：

setup(props) {
  const xs: x[] = props.x;

  //Called when @click
  async function toggleSortByProperty(property: string) {
    const ys = await axios.dosomething();

    xs.splice(0);
    xs.push(...ys)
  }
}

以上行不通。但是如果我在toggleSortByProperty 行的正下方声明const xs，那么它会神奇地起作用。但是，这不是我想要的，因为我将在设置中的多个函数中使用该变量。

一些更奇特的信息：

当我热重载（保存文件后发生）时，它突然又可以工作了；
似乎 xs 变量仅在第一次单击时未定义，然后再定义。这可能会破坏一些东西。

所以，我在这里有点不知所措。什么给了？

编辑：
在我编辑这篇文章时，我试图同时解决这个问题，但我发现了问题。这是我愚蠢的时刻。原来问题是子组件是在实际填充“x”之前创建的。我最近将我的 v-if 换成了父组件中的 b-overlay (BootstrapVue)，它（显然）只隐藏了子组件而不是延迟它的创建。这也解释了为什么当 'xs' 的声明在切换函数中时它会起作用。

【问题讨论】：

你怎么打电话给toggleSortByProperty？您是否在等待完成？毕竟这是一个异步函数。
@VLAZ 这是一个带有点击事件的按钮：click="toggleSortByProperty('title')"。我不相信这部分会给我带来任何问题，但你提出了一个很好的观点。 x 属性确实是由父组件向下传递的，但其中的值也来自异步获取。不管我等多久触发点击事件，结果总是一样的。是的，我相信这可能是问题所在，因为当 props 承诺仍在试图解决时，const 被宣布得太早了。除了在函数中声明 var 之外，等待 promise 解决的正确方法是什么？
请为您的问题提供stackoverflow.com/help/mcve。父母导致它表明您没有提供足够的信息。
@EstusFlask 是的，我的错。实际上，我已经排除了父组件中的任何问题，因为到目前为止，子组件中的一切似乎都运行良好。我忘记了我将父级中的 v-if 换成了 b-overlay (BootstrapVue)，这导致了这个问题。我想深夜的编码课程确实会激发出我最糟糕的一面……

标签： typescript vue.js vue-composition-api

【解决方案1】：

在进行 return 时尝试将 xs 变量放在计算中，所以它会像

return {
xs:computed(()=>xs)
}

否则，根据您描述的逻辑，我建议您不要在此处提出此请求，父级（发送主要结果的人）是否负责此类操作排序、过滤等。以及您的组件显示数据，之后单元测试会更加清晰和容易。

【讨论】：