在构建过程中使用`this`更新函数中的useState会导致未定义错误 - Nuxt 3 & Strapi 4.12 - SFC（script setup）

Question

<p><br /></p><h2><br /></h2> <p><code>"@strapi/strapi": "4.12.0",</code></p> <p><code>"nuxt": "^3.6.5",</code></p> <p>在我的开发环境中，我有一个项目页面，带有一个分类筛选器，可以显示所有项目或带有相应项目的分类。<br /><br />我正在使用useAsyncQuery从Strapi获取项目和分类。<br /><br />在筛选器中，有一个下拉菜单，其中包含各种分类。点击这些分类时，将调用函数switchCategory(filter.id)。在该函数中，使用this更新了各种状态。<br /><br />请查看以下脚本设置：</p><p><code></code></p> <pre class="brush:php;toolbar:false;"> 从“~/queries/projects/archive”导入{projectsQuery}； 从“~/queries/projects/filter”导入{filterQuery}； const { 数据：filterRes } = 等待 useAsyncQuery(filterQuery) const { 数据：projectsRes } = 等待 useAsyncQuery(projectsQuery) var isLoading = useState('isLoading', () => false) var filterActive = useState('filterActive', () => false) var filterActiveText = useState('filterActiveText', () => '所有项目') const itemsUrl = useState('projectsUrl', () => '/projecten/') const 过滤器 = useState('filters', () => filterRes.value.projectCategories.data) const 项目 = useState('projects', () =>projectsRes.value.projects.data) var FilteredProjects = useState('filteredProjects', () => 项目) 函数 switchCategory(id) { this.isLoading = true this.filterActive = false; document.getElementById("projects-container").scrollIntoView({ 行为：“平滑”， }); setTimeout(() => { 如果（id）{ this.filters.map((item) => { if (id == item.id) { this.filteredProjects = item.attributes.projects.data; this.filterActiveText = item.attributes.Title; } }); } 别的 { this.filteredProjects = this.projects; this.filterActiveText = '所有项目'; } this.isLoading = false; }, 600) }</pre> <p>并且在模板元素中：</p> <pre class="brush:php;toolbar:false;"><div class="flex flex-col gap-y-8 md:gap-y-24 lg:gap-y-40 过渡所有持续时间-600 缓入出" :class="{ 'blur-0': !正在加载, '模糊'：正在加载， }">

; <div class="flex flex-col items-start justify- Between"> <div class="sticky top-40 pb-16 lg:pb-20 prose-xl">

{{ project.attributes.Title }}

; <p class="block">{{ project.attributes.Intro }}</p>

贝基肯项目 </按钮>

Answer 1

我不确定能否提供一个完整的可工作的代码片段，但也许我可以指导您找到解决方案。

useState只在构建时或组件渲染时可用。因此，在渲染后更改查询参数不会使其更新。也许在状态变更后重新渲染组件会有帮助？