Comment enregistrer l'état de fermeture des fenêtres pop-up dans Vue.js

Dans le développement de Vue.js, les fenêtres contextuelles sont l'une des fonctions fréquemment utilisées. Les fenêtres pop-up ont généralement deux états : ouverte et fermée. Après la fermeture de la fenêtre pop-up, nous devons généralement enregistrer l'état de la fenêtre pop-up actuelle afin que l'état précédent puisse être restauré lorsque la fenêtre pop-up est fermée. ouvert plus tard. Cet article explique comment enregistrer l'état de fermeture des fenêtres contextuelles dans Vue.js.

Description du problème

Dans Vue.js, nous pouvons généralement utiliser v-show, v-if et d'autres instructions pour contrôler l'affichage et le masquage des fenêtres contextuelles. Lorsqu'une fenêtre contextuelle est fermée, nous devons généralement enregistrer l'état de la fenêtre contextuelle actuelle afin qu'elle puisse être restaurée à son état précédent lorsque la fenêtre contextuelle est à nouveau ouverte. Alors, comment enregistrer l’état de fermeture de la fenêtre pop-up ?

Solution

Vue.js fournit une variété de solutions pour enregistrer l'état de fermeture des fenêtres contextuelles. Ces solutions sont présentées ci-dessous.

Option 1 : Utilisez la fonction de hook de cycle de vie de Vue.js

Vue.js fournit une variété de fonctions de hook de cycle de vie. Nous pouvons utiliser ces fonctions de hook pour enregistrer l'état de fermeture de la fenêtre contextuelle.

Dans le composant fenêtre pop-up, nous pouvons définir un attribut de données pour enregistrer l'état de la fenêtre pop-up :

data() {
  return {
    isClosed: false // 弹窗关闭状态
  }
}

Ensuite, enregistrez l'état de fermeture de la fenêtre pop-up dans la fonction hook de cycle de vie beforeDestroy :

beforeDestroy() {
  this.isClosed = true; // 记录弹窗关闭状态
}

De cette façon, lorsque la fenêtre pop-up est rouverte, cet état peut être utilisé pour restaurer l'état précédent.

Option 2 : Utiliser la gestion d'état Vuex

Vuex est la bibliothèque de gestion d'état officiellement fournie par Vue.js. Nous pouvons utiliser Vuex pour enregistrer l'état des fenêtres contextuelles.

Dans Vuex, nous pouvons définir un état pour enregistrer l'état de fermeture de la fenêtre pop-up :

const state = {
  isClosed: false // 弹窗关闭状态
}

Ensuite, lorsque la fenêtre pop-up est fermée, nous pouvons soumettre une mutation pour changer l'état :

mutations: {
  closeDialog(state) {
    state.isClosed = true; // 改变弹窗关闭状态
  }
}

In de cette façon, lorsque la fenêtre contextuelle est rouverte, cet état peut être utilisé pour restaurer l'état précédent.

Option 3 : Utilisez localStorage pour stocker l'état

localStorage est la fonction de stockage local fournie par le navigateur. Nous pouvons utiliser localStorage pour stocker l'état de fermeture de la fenêtre contextuelle.

Lorsque la fenêtre pop-up est fermée, nous pouvons enregistrer l'état dans localStorage :

localStorage.setItem('isClosed', true); // 保存弹窗关闭状态

Ensuite, lorsque la fenêtre pop-up se rouvre, nous pouvons lire l'état depuis localStorage :

const isClosed = localStorage.getItem('isClosed'); // 读取弹窗关闭状态

De cette façon, lorsque la pop-up -up fenêtre rouvre Cet état peut être utilisé pour restaurer l'état précédent.

Résumé

Les trois options ci-dessus peuvent toutes enregistrer l'état de fermeture de la fenêtre contextuelle. L'option à choisir dépend de la situation réelle. Si l'application est relativement simple et que la quantité de données est faible, vous pouvez choisir l'option un ou l'option deux ; si l'application est relativement complexe et la quantité de données est importante, vous pouvez choisir l'option trois. Quelle que soit la solution adoptée, il est très important pour les développeurs d'enregistrer l'état de fermeture des fenêtres contextuelles, ce qui peut améliorer l'efficacité du développement et réduire l'écriture de code inutile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!