Explication détaillée des étapes de stockage de surveillance dynamique vuex + localstorage

Cette fois, je vais vous apporter une explication détaillée des étapes de stockage de surveillance dynamique vuex+localstorage Quelles sont les précautions pour les étapes de stockage de surveillance dynamique vuex+localstorage. jetez un oeil.

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 immuables, mais lorsque deux composants partagent une source de données (objet ou

tableau), le cas échéant. d'entre eux Lorsqu'un composant modifie la source de données et souhaite qu'un autre composant réponde au changement, le stockage local ne peut pas le faire. La raison est la différence 1.

À propos du document de référence vuex : http://vuex.vuejs.org/zh-cn/index.html

Processus de mise en œuvre : afficher les informations de l'avatar de l'utilisateur sur la page d'accueil, modifier les informations personnelles en public composants Par exemple, dans le composant d'en-tête, 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, l'utilisateur ne pourra voir les modifications qu'après chaque modification par. actualiser la page ou revenir d'autres pages, c'est-à-dire les informations d'avatar nouvellement définies, affichant uniquement le code principal.

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.mutations stockent les informations de stockage local. Les mutations peuvent changer d'état. Ce sont essentiellement des fonctions utilisées pour traiter les données. Elles reçoivent 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 utiliser la fonction auxiliaire mapMutations pour mapper directement la fonction de déclenchement aux méthodes, afin qu'elle puisse être utilisée directement sur l'élément

événement obligatoire .

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

3. Obtenez les informations de stockage local dans le 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 qui. doit obtenir des informations de stockage

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. Référence à la valeur de vuex dans le modèle

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'informations intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée des étapes pour implémenter la réutilisation des ports dans Node.Js

Instructions sur les étapes pour implémenter la liaison bidirectionnelle dans Vue.js

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!