vuex+localstorage 동적 모니터링 저장 단계에 대한 자세한 설명

이번에는 vuex+localstorage 스토리지 동적 모니터링 단계에 대해 자세히 설명하겠습니다. vuex+localstorage 스토리지 동적 모니터링의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

분석: vue는 로컬 저장소 변경 사항을 모니터링할 수 없습니다. Localstorage는 주로 서로 다른 페이지 간 값을 전송하는 데 사용되는 반면, vue는 구성 요소 간 값을 전송하는 데 적합합니다. 동일한 데이터를 공유하고 페이지를 새로 고칠 때 정보를 저장하거나 데이터를 잃지 않으려는 구성 요소의 경우(페이지를 새로 고칠 때 vuex에 저장된 값이 손실되고 localstorage가 로컬 브라우저에 저장됨) 다음을 수행할 수 있습니다. vuex+localstorage 방법을 사용하세요.

vuex와 저장소의 차이점

1. 가장 중요한 차이점: vuex는 메모리에 저장되는 반면 localstorage는 파일 형식으로 로컬에 저장됩니다.

2 응용 프로그램 시나리오: vuex는 값을 전송하는 데 사용됩니다. ​​컴포넌트 간 로컬 스토리지는 주로 서로 다른 페이지 간에 값을 전송하는 데 사용됩니다.

3. 영속성: 페이지를 새로 고치면 vuex에 저장된 값이 손실되지만 localstorage는 손실되지 않습니다.

참고: 많은 학생들은 vuex 대신 로컬 저장소를 사용할 수 있다고 생각합니다. 데이터가 변경되지 않은 경우 실제로 가능하지만 두 구성 요소가 데이터 소스(객체 또는 배열)를 공유하는 경우 구성 요소 중 하나가 데이터 소스를 변경하면 다른 구성 요소가 변경 사항에 응답하면 localstorage가 이를 수행할 수 없기를 바라며 그 이유는 차이점 1입니다.

vuex 참조 문서 정보: http://vuex.vuejs.org/zh-cn/index.html

구현 과정: 홈 페이지를 가져와서 사용자 아바타 정보를 표시하고 공용 구성 요소 헤더 구성 요소의 개인 정보를 다음과 같이 수정합니다. 예를 들어, 이용자가 개인정보를 수정하는 경우, 홈페이지의 사진은 실시간으로 변경되며, 아바타 정보가 저장 및 업데이트되지 않는 경우, 이용자는 각 수정 후 페이지를 새로 고치거나 다른 페이지로 돌아가야만 변경 사항을 확인할 수 있습니다. 즉, 새로 설정된 아바타 정보에는 핵심 코드만 표시됩니다.

1. 먼저 상태에서 변수를 정의합니다. State는 전체 애플리케이션의 상태 데이터를 저장하는 역할을 담당합니다. 나중에 상태를 직접 얻으려면 this.$store.state를 사용할 수 있습니다. vuex에서 제공하는 mapState 보조 함수를 사용하여 상태를 계산된 속성에 매핑할 수도 있습니다.

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

2.mutations는 로컬 저장소 정보를 저장합니다. 돌연변이는 상태를 변경할 수 있습니다. 이는 본질적으로 고유한 매개변수 값 상태를 수신하는 데이터를 처리하는 데 사용되는 함수입니다. 정의된 변형은 동기 함수여야 합니다. this.$store.commit(mutationName)은 mutation을 발생시키는 데 사용되는 메소드이거나, 보조 함수인 mapMutations를 사용하여 트리거 함수를 메소드에 직접 매핑시켜 요소이벤트 바인딩에 바로 사용할 수 있도록 하는 메소드입니다.

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

3. getter에서 로컬 저장소 정보를 가져옵니다. 일부 상태에서는 보조 처리가 필요하므로 getter를 사용할 수 있습니다. this.$store.getters.valueName을 통해 파생된 상태에 액세스합니다. 또는 보조 함수 mapGetters를 직접 사용하여 로컬 계산 속성에 매핑합니다.

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

4. 저장소 작업이 필요한 페이지에서 mapMutations 함수를 참조하세요

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

5. 저장소 정보를 가져와야 하는 페이지에서 mapGetters 보조 함수를 참조하세요.

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. the template

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Node.Js에서 포트 재사용을 구현하는 단계에 대한 자세한 설명

Vue.js 양방향 바인딩 구현 단계

위 내용은 vuex+localstorage 동적 모니터링 저장 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!