Vuex는 로컬 스토리지를 결합하여 스토리지 변경 사항을 동적으로 모니터링합니다.

이 글에서는 스토리지 변경 사항을 동적으로 모니터링하기 위해 로컬 스토리지와 결합된 vuex에 대한 자세한 설명을 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다

요구 사항: 여러 구성 요소가 동일한 데이터를 공유합니다. 한 구성 요소가 데이터를 변경하면 다른 구성 요소도 변경 사항에 응답할 수 있습니다.

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

vuex와 저장소의 차이점

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

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

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

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

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

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. #

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

related 권장 사항에서 vuex의 값에 대한 템 템플릿 참조 : vue-router

에서 전달되는 쿼리 동적 매개 변수를 구현하는 방법

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