Impossible de définir la propriété non définie (paramètre 'isRightSidebarExpanded')

Question

J'essaie de convertir un modèle à utiliser avec nuxt.js

Cette propriété m'a donné cette erreur

Impossible de définir la propriété non définie (paramètre 'isRightSidebarExpanded')

@click="$store.global.isRightSidebarExpanded = false"

Voici le fichier JS : https://lineone.piniastudio.com/js/app.js

Je l'ai importé dans nuxt.js en utilisant cette ligne dans nuxt.config.js

script: [
     {src: '/js/app.js', body: false, defer:true}
     ]

Ensuite, nuxt.js m'a montré cette erreur car il semblait ignorer les fichiers javascript du client, bien qu'il fonctionnait parfaitement sans nuxt.js mais n'incluait localement que les fichiers HTML/JS statiques

Vous pouvez voir que le site Web fonctionne correctement (Laravel) ici https://lineone.piniastudio.com/

Certaines variables HTML (telles que "activeTab") sont également indéfinies

La propriété ou méthode 'activeTab' n'est pas définie sur l'instance mais est référencée lors du rendu. Assurez-vous que la propriété est réactive dans les options de données ou pour les composants basés sur les classes en l'initialisant. Voir : https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Propertie

Mais quand je garde juste le HTML/JS/CSS et que je le fais fonctionner en mode statique sans nuxt.js, tout fonctionne bien

Answer 1

Il n'est pas recommandé de modifier directement les données du magasin.
Vuex utilise Mutations pour valider les modifications dans l'état stocké.

1. Ajoutez une mutation pour modifier la propriété isRightSidebarExpanded

mutations: {
    isRightSidebarExpanded(state , payload) {
      // mutate state
      state.isRightSidebarExpanded = payload ;
    }
  }

2. Vous pouvez maintenant appeler votre mutation

@click="$store.global.commit('isRightSidebarExpanded',false)"

------------------------------------------------- ---------- ---------------------------------------
Pour les questions non définies :
- Vérifiez si la propriété $store.global existe
- Vérifiez si vous utilisez store (main.js)

app.use(store);