Comment utiliser vuex combiné avec localstorage pour surveiller dynamiquement les modifications de stockage-js tutoriel-php.cn

Comment utiliser vuex combiné avec localstorage pour surveiller dynamiquement les modifications de stockage

php中世界最好的语言

Libérer： 2018-06-01 11:33:57

original

1401 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser vuex combiné avec localstorage pour surveiller dynamiquement les changements de stockage. Quelles sont les précautions pour utiliser vuex combiné avec localstorage pour surveiller dynamiquement les changements de stockage. Voici des cas pratiques. jetez un oeil.

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 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 //首页头像信息
}

Copier après la connexion

2.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 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)
 }

Copier après la connexion

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
 }

Copier après la connexion

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里面定义的方法

Copier après la connexion

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的值发生变化就实时刷新变量的值。
  }
 },

Copier après la connexion

6. Référence à la valeur de vuex dans le modèle

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

Copier après la connexion

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 une animation de chute de flocon de neige avec JS

Comment utiliser Vue+ toile pour implémenter une fonction de bloc d'écriture manuscrite mobile

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!