L'utilisation de `this` pour mettre à jour useState dans une fonction pendant la construction entraîne une erreur non définie - Nuxt 3 & Strapi 4.12 - SFC (configuration du script)

Question

"@strapi/strapi": "4.12.0",

"nuxt": "^3.6.5",

Dans mon environnement de développement, j'ai une page de projets avec un filtre de catégorie qui affiche soit tous les projets, soit les catégories avec les projets correspondants.

J'utilise useAsyncQuery pour obtenir des éléments et des catégories de Strapi.

Dans le filtre, il y a un menu déroulant avec différentes catégories. Lorsque vous cliquez sur ces catégories, la fonction switchCategory(filter.id) sera appelée. Dans cette fonction, divers états sont mis à jour à l'aide de ceci.

请查看以下脚本设置：

importer {projectsQuery} depuis "~/queries/projects/archive" ;
importer { filterQuery } depuis "~/queries/projects/filter" ;

const { data : filterRes } = wait useAsyncQuery (filterQuery)
const { données : projetsRes } = attendre useAsyncQuery (projectsQuery)

var isLoading = useState('isLoading', () => false)
var filterActive = useState('filterActive', () => false)

var filterActiveText = useState('filterActiveText', () => 'Tous les projets')
constprojectsUrl = useState('projectsUrl', () => '/projecten/')

const filters = useState('filters', () => filterRes.value.projectCategories.data)
const projets = useState('projects', () => projetsRes.value.projects.data)
var filteredProjects = useState('filteredProjects', () => projets)

fonction switchCategory(id) {

  this.isLoading = vrai
  this.filterActive = faux ;

  document.getElementById("projects-container").scrollIntoView({
    comportement : « doux »,
  });


  setTimeout(() => {
    si (identifiant) {
      this.filters.map((élément) => {
        si (id == article.id) {
          this.filteredProjects = item.attributes.projects.data;
          this.filterActiveText = item.attributes.Title;
        }
      });
    } autre {
      this.filteredProjects = this.projects;
      this.filterActiveText = 'Tous les projets';
    }
    this.isLoading = faux ;
  }, 600)
}
并且在模板元素中：

  

    
    

      

        
{{ project.attributes.Title }}
        
{{ project.attributes.Intro }}
      
      
        Projet bekijken
      
    
    

      

        
      
    
  


Lorsque je construis le projet, j'utilise nuxt build, puis j'utilise node .output/server/index.mjs pour démarrer un serveur Node, le projet peut se charger normalement. Mais lorsque j'essaie de filtrer, tout en essayant de mettre à jour des variables telles que isLoading et filterActive dans la fonction switchCategory, l'erreur est renvoyée : TypeError : Impossible de définir les propriétés d'undéfini (réglage de "isLoading"). 

Tentative de correction n°1

Je pensais que, peut-être qu'après la construction, il ne comprend pas ce contexte (car lorsque j'essaie de console.log , ceci n'est pas non plus défini). J'ai donc essayé de refactoriser le code, comme ceci : ;
const switchCategory = (id) =>

  isLoading = vrai
  filtreActive = faux ;

  document.getElementById("projects-container").scrollIntoView({
    comportement : « doux »,
  });


  setTimeout(() => {
    if (id && filtres) {
      filtres && filtres.value.map((élément) => {
        si (id == article.id) {
          filteredProjects = item.attributes.projects.data;
          filterActiveText = item.attributes.Title;
        }
      });
    } autre {
      filteredProjects = projets ;
      filterActiveText = 'Tous les projets';
    }
    isLoading = faux ;
  }, 600)
}
J'ai changé la fonction normale en fonction de flèche et je l'ai supprimée. 

Dans setTimeout, j'ai dû changer filters.map en filters.value.map (je ne sais pas vraiment pourquoi le format a changé). 

Maintenant, le code fonctionne correctement (pas d'erreur), mais il ne met pas à jour le DOM de la boucle d'élément dans le modèle. 

Tentative de correction n°2

Après avoir cherché et débogué pendant un certain temps, j'ai trouvé le contenu de DefineExpose dans la documentation de Vue. 

Il mentionne que les paramètres du script sont "fermés" par défaut. J'ai (désespérément) ajouté ceci aux paramètres de mon script, y compris toutes les variables : 
 ;
defineExpose({
  filtreRes,
  projetsRes,
  pageRes,
  est en cours de chargement,
  filtreActive,
  filtreActiveText,
  URL des projets,
  des filtres,
  projets,
  Projets filtrés,
})
Malheureusement, comme prévu, cela n’a pas fonctionné comme par magie. 

Solution ? 
Je vois probablement les choses dans le mauvais sens, mais je ne vois aucune autre solution.

Est-ce que j'ai raté quelque chose ? 

            

Answer 1

Je ne suis pas sûr de pouvoir fournir un extrait de code fonctionnel complet, mais je peux peut-être vous guider vers une solution.

useState n'est disponible que lors de la construction ou lorsque le composant est rendu. Ainsi, modifier les paramètres de la requête après le rendu ne la mettra pas à jour. Peut-être que restituer le composant après un changement d'état serait utile ?