Comment implémenter la réinitialisation de l'état d'inactivité dans vuex

Cet article présente principalement la solution de réinitialisation de l'état d'inactivité de vuex. Maintenant, je le partage avec vous et le donne comme référence.

Avant-propos

Pour les grandes applications d'une seule page (ci-après dénommées spa), nous utilisons souvent le gestionnaire d'état vuex pour résoudre le partage d'état et le transfert d'état entre les composants. question. Ce type d’application peut aller de dizaines de pages uniques à des centaines de pages uniques. Avec les changements fréquents d'itinéraires, il y aura de plus en plus d'états dans vuex correspondant à chaque itinéraire. Afin d'obtenir l'optimisation ultime de la page, nous devons réinitialiser ces états d'inactivité afin de réduire l'espace mémoire occupé.

Quel statut peut être réinitialisé

vuex met l'accent sur l'utilisation d'un stockage centralisé pour gérer l'état de tous les composants de l'application, mais nous mettons vraiment tous les statuts dans le Store Processing, vous trouverez très pénible à développer. Si vous souhaitez avoir un bon contrôle sur les données qui doivent être placées dans le magasin à des fins de gestion, vous devez d'abord comprendre quel problème vuex est utilisé pour résoudre. Le site officiel de vuex souligne qu'il s'agit de résoudre le problème de l'état de partage de plusieurs composants, nous pouvons alors placer l'état partagé de plusieurs composants dans le magasin pour la gestion. Le partage multi-composants ici est souvent un composant de routage croisé pour un seul. applications de plusieurs pages. Si le magasin stocke uniquement l'état partagé par plusieurs composants, nous n'avons pas besoin de nettoyer l'état dans vuex, car ces états seront utilisés à tout moment.

À mesure que les scénarios commerciaux deviennent de plus en plus complexes, une grande partie de la logique d'interaction avec l'arrière-plan est intégrée aux composants, de sorte que le code devient très compliqué et que vuex n'est pas pleinement utilisé. À ce stade, nous pouvons mettre la logique d'interaction avec l'API backend dans l'action dans vuex pour le traitement, et le statut renvoyé par le backend sera naturellement mis dans la gestion du magasin. Après ce traitement, le composant est uniquement responsable du rendu des données, et la logique est très claire. À ce stade, il y aura de plus en plus d'états dans le magasin correspondant au composant en tant que commutateurs de routage, et ces états doivent être nettoyés manuellement.

De nombreuses solutions comportent des compromis. Si vous placez les données qui interagissent avec l'API d'arrière-plan dans des composants, il n'est pas nécessaire de les nettoyer, mais la logique du code deviendra compliquée. De plus, le plug-in vue-devtools tel que vuex ne pourra pas surveiller les modifications de chaque requête de données...

Quand réinitialiser l'état

L'effet souhaité Lorsque le routage est commuté, le statut dans vuex correspondant à l'itinéraire précédent est réinitialisé. Cependant, il n'y a pas de correspondance biunivoque entre le routage et la vuex. Si nous voulons obtenir cet effet, nous devons le faire. maintenir un module de routage et de vuex Relation de correspondance, ce sera très fastidieux. Il est préférable de réinitialiser tous les états dans vuex lorsque l'itinéraire change.

Comment nettoyer l'état d'inactivité dans vuex

Ce qui suit sera expliqué en conjonction avec mon exemple github. Cet exemple crée une application d'une seule page lorsque nous. Changez d'itinéraire, nous allons effacer l'état d'inactivité.

Transformer l'état du module du composant correspondant à l'itinéraire

Dans l'exemple, le magasin est découpé en plusieurs modules, et l'état du composant correspondant à l'itinéraire est placé dans le module correspondant, l'état partagé par plusieurs composants est géré dans le magasin de niveau supérieur. C'est à peu près le suivant :

// store/index.js
import page1 from "./modules/page1.js";
import page2 from "./modules/page2.js";
import page3 from "./modules/page3.js";
import page4 from "./modules/page4.js";
import page5 from "./modules/page5.js";

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  modules: { // 每个路由对应的 module
    page1,
    page2,
    page3,
    page4,
    page5
  },
  plugins: __DEV__ ? [createLogger()] : [],
  strict: __DEV__ ? true : false
});

L'état du module correspondant à la route page1 se présente sous la forme :

// store/modules/page1.js
const state = {
   // 列表数据
   page1Data: [],
   // 标题数据
   page1Title: ''
}

Ces données sont renvoyées et copiées en appelant l'api backend. Si nous modifions l'itinéraire Lors de la réinitialisation de ces données, vous devez extraire les données d'initialisation et exposer une méthode d'identification initState() qui doit être réinitialisée, ce qui signifie qu'elle doit être réinitialisée lorsque l'itinéraire change. est une convention, et vous pouvez également la définir comme un autre nom. Après transformation :

// store/modules/page1.js
// 放置你要重置的数据
const initState = {
  page1Data: [],
}

// state
const state = {
  // 参数解构
  ...initState,

  // 路由改变不想重置的数据
  page1Title: '',
  initState(){
    return initState
  }
}

Configuration globale du module

Définir le type d'événement de mutation globale

// store/types.js
export const RESET_STATES = 'resetStates'

Définir la mutation globale

// store/mutation.js

import * as types from './types'

// 检测所有的 state 并把 `initState()` 中的属性重置
function resetState(state, moduleState) {

  const mState = state[moduleState];

  if (mState.initState && typeof mState.initState === 'function') {

    const initState = mState.initState();

    for (const key in initState) {

      mState[key] = initState[key];
    }
  }

}

export default {

  [types.RESET_STATES](state, payload) {

    for (const moduleState in state) {

      resetState(state, moduleState);
    }
  },

}

Définir une action globale

// store/action.js
import * as types from './types'

export default {
  // rest state action
  resetStates:function (context, payLoad) {

    context.commit(types.RESET_STATES, payLoad);
  }
}

Méthode de réinitialisation du déclencheur de changement d'itinéraire

Maintenant, tout est prêt, vous n'avez plus besoin que de la méthode pour déclencher la réinitialisation lorsque l'itinéraire change. traitez-le dans le fichier vue d'entrée

// components/app.vue
<script>
  import {mapState, mapActions} from "vuex"
  export default{

    methods: {

      ...mapActions({
        resetStates: "resetStates"
      })
    },

    watch: {

      $route(to, from) {
        // 路由改变发起重置
        this.resetStates();
      }
    }
  }
</script>

Si votre navigateur Chrome a vuejs-devtools installé, vous pouvez clairement voir le processus de réinitialisation des données de routage précédentes lors du changement d'itinéraire.

Résumé

Cliquez ici pour des exemples. Notre réinitialisation d'état vuex ici consiste à parcourir les états dans tous les magasins à chaque fois que la route est commutée et à réinitialiser les propriétés dans initState(). Ce serait mieux si nous pouvions réinitialiser l'état correspondant à la route actuelle. Mais il n'y a aucune relation. entre le routage et les modules dans le magasin. Voici juste une solution pour réinitialiser le statut vuex. Si vous avez une meilleure solution, veuillez laisser un message. S'il y a quelque chose d'inapproprié, n'hésitez pas à laisser un commentaire.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment référencer les icônes de police Ali dans vue

À propos de l'utilisation réelle de log4js dans Express

Comment implémenter la fonction WebSocket à l'aide de NodeJS

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!