로컬 스토리지와 결합된 vuex를 사용하여 스토리지 변경 사항을 동적으로 모니터링하는 방법

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS에서 눈송이 떨어지는 애니메이션을 구현하는 단계에 대한 자세한 설명

Vue+canvas를 사용하여 모바일 필기 패드 기능을 구현하는 방법

위 내용은 로컬 스토리지와 결합된 vuex를 사용하여 스토리지 변경 사항을 동적으로 모니터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!