Vuex combine le stockage local pour surveiller dynamiquement les modifications du stockage

Cet article présente principalement l'explication détaillée de vuex combinée avec localstorage pour surveiller dynamiquement les changements de stockage. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Exigence : différents composants partagent les mêmes données. Lorsqu'un composant modifie les données, d'autres composants peuvent également répondre au changement.

Analyse : vue ne peut pas surveiller les modifications du stockage local. Localstorage est principalement utilisé pour transférer des valeurs entre différentes pages, tandis que vue convient au transfert de valeurs entre composants. Pour les composants qui partagent les mêmes données et souhaitent enregistrer les informations ou ne pas perdre les données lors de l'actualisation de la page (la valeur stockée par vuex sera perdue lors de l'actualisation de la page et le stockage local est stocké dans le navigateur local), vous pouvez utilisez la méthode vuex+localstorage.

À propos de la différence entre vuex et stockage

1 La différence la plus importante : vuex est stocké en mémoire, tandis que le stockage local est stocké localement sous forme de fichiers

2. Scénarios d'application : vuex est utilisé pour transférer des valeurs entre composants, tandis que localstorage est principalement utilisé pour transférer des valeurs entre différentes pages.

3. Permanence : la valeur stockée dans vuex sera perdue lors de l'actualisation de la page, mais pas le stockage local.

Remarque : De nombreux étudiants pensent que le stockage local peut être utilisé à la place de vuex. C'est effectivement possible pour des données inchangées, mais lorsque deux composants partagent une source de données (objet ou tableau), si l'un des composants modifie les données. source, lorsque vous souhaitez qu'un autre composant réponde au changement, localstorage ne peut pas le faire, la raison est la différence 1.

Processus de mise en œuvre : prenez comme exemple la page d'accueil pour afficher les informations de l'avatar de l'utilisateur et modifier les informations personnelles dans le composant d'en-tête du composant public. Lorsque l'utilisateur modifie les informations personnelles, l'image sur la page d'accueil change en temps réel. Si les informations de l'avatar ne sont pas stockées et mises à jour, chaque fois que l'utilisateur a effectué la modification, il ne peut voir les modifications qu'en actualisant la page ou en revenant d'autres pages, c'est-à-dire les informations d'avatar nouvellement définies et uniquement le noyau Le code s'affiche.

1. Définissez d’abord une variable dans l’état. L'état est responsable du stockage des données d'état de l'ensemble de l'application. Vous pouvez utiliser this.$store.state pour obtenir directement l'état ultérieurement. Vous pouvez également utiliser la fonction auxiliaire mapState fournie par vuex pour mapper l'état aux propriétés calculées.

const state = {
 imgInfo:null //首页头像信息

}

2.les mutations stockent les informations de stockage local. Les mutations peuvent modifier l'état, qui est essentiellement une fonction utilisée pour traiter les données, qui reçoit l'état de valeur de paramètre unique. La mutation définie doit être une fonction synchrone. this.$store.commit(mutationName) est une méthode utilisée pour déclencher une mutation, ou utilise la fonction auxiliaire mapMutations pour mapper directement la fonction de déclenchement aux méthodes, afin qu'elle puisse être utilisée directement dans la liaison d'événement d'élément.

export const SETIMGINFO = 'SETIMGINFO'
[SETIMGINFO] (state,info) {
 state.imgInfo=info
 localStorage.setItem('imgInfo',info)
 }

3. Obtenez des informations de stockage local auprès du getter. Certains états nécessitent un traitement secondaire, vous pouvez donc utiliser des getters. Accédez à l'état dérivé via this.$store.getters.valueName. Ou utilisez directement la fonction auxiliaire mapGetters pour la mapper aux propriétés calculées locales.

getImgInfo(state){
  if(localStorage.getItem('imgInfo')){
  state.imgInfo=localStorage.getItem('imgInfo')
  }
  return state.imgInfo
 }

4. Référencez la fonction mapMutations sur la page qui doit fonctionner sur le stockage

import {mapMutations} from 'vuex' //引入mapMutations
 ...mapMutations([      
  'SETIMGINFO'
  ]),
this.SETIMGINFO(this.imgInfo) 
 //在需要的地方引用 mutations里面定义的方法

5. Référencez la fonction auxiliaire mapGetters sur la page où les informations de stockage doivent être obtenues

import {mapGetters} from 'vuex'
computed:{
  ...mapGetters([   
  'getImgInfo'
  ])
 },
watch:{ //动态监听state的变化，实时改变页面的数据
  getImgInfo: function(li) { //li就是改变后的state里面的imgInfo
  let vm = this;
   this.imgInfo=li //data声明一个变量，在html引用。如果storage的值发生变化就实时刷新变量的值。
  }
 },

6. valeur vuex dans le modèle

<img :src="imgInfo?imgInfo:info.avatar"> 
//三元不等式，如果state发生变化有值就赋值给img标签，如果没有即刚进页面就赋值给create生命周期函数中从接口读出来的数据

Recommandations associées :

Comment implémenter le passage des paramètres dynamiques de requête dans vue -routeur

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!