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 //首页头像信息 }
export const SETIMGINFO = 'SETIMGINFO' [SETIMGINFO] (state,info) { state.imgInfo=info localStorage.setItem('imgInfo',info) }
getImgInfo(state){ if(localStorage.getItem('imgInfo')){ state.imgInfo=localStorage.getItem('imgInfo') } return state.imgInfo }
import {mapMutations} from 'vuex' //引入mapMutations ...mapMutations([ 'SETIMGINFO' ]), this.SETIMGINFO(this.imgInfo) //在需要的地方引用 mutations里面定义的方法
import {mapGetters} from 'vuex' computed:{ ...mapGetters([ 'getImgInfo' ]) }, watch:{ //动态监听state的变化,实时改变页面的数据 getImgInfo: function(li) { //li就是改变后的state里面的imgInfo let vm = this; this.imgInfo=li //data声明一个变量,在html引用。如果storage的值发生变化就实时刷新变量的值。 } },
<img :src="imgInfo?imgInfo:info.avatar"> //三元不等式,如果state发生变化有值就赋值给img标签,如果没有即刚进页面就赋值给create生命周期函数中从接口读出来的数据
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!