Vuex 페이지 새로 고침 후 데이터 삭제를 방지하는 방법

이번에는 vuex 페이지를 새로 고친 후 데이터가 지워지는 것을 방지하는 방법을 알려드리겠습니다. 다음은 실제 사례입니다. 바라보다.

1.Cause

2.Solution

localStorage에는 시간 제한이 없으며,

s session

Storage는 세션입니다. 브라우저가 닫히고 시간 제한이 있으며 자체 Baidu가 있으면 세션이 종료됩니다여기서 sessionStorage를 사용합니다. 여기서 주목해야 할 점은 vuex의

variables

는 반응하지만 sessionStorage는 반응하지 않는다는 것입니다. vuex에서 상태를 변경하면 구성 요소 변경 사항이 감지되지만 sessionStorage는 변경 사항을 보려면 페이지를 새로 고쳐야 하므로 구성 요소가 응답적으로 변경될 수 있도록 vuex의 상태를 sessionStorage에서 가져와야 합니다. 3. 구체적인 구현

애플리케이션 배경은 사용자가 로그인한 후 상태를 저장하고 mutations.js

ADD_LOGIN_USER (state,data) { //登入，保存状态 
 sessionStorage.setItem("username", data); //添加到sessionStorage 
 sessionStorage.setItem("isLogin",true); 
 state.username=data,  //同步的改变store中的状态 
 state.isLogin=true 
 }, 
 SIGN_OUT (state) { //退出，删除状态 
 sessionStorage.removeItem("username"); //移除sessionStorage 
 sessionStorage.removeItem("isLogin"); 
 state.username=''  //同步的改变story中的状态 
 state.isLogin=false 
 }

getters.js

isLogin (state) { 
 if (!state.isLogin) { 
  state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态 
  state.username=sessionStorage.getItem('username'); 
 } 
 return state.username 
 }

종료 후 상태를 제거하는 것입니다. 전체적인 구현 아이디어는 sessionStorage와 일치하는 vuex의 스토리 상태(sessionStorage Value에서)

4.나중의 말

저는 vuex가 응답적으로 구성 요소를 변경할 수 있다는 것을 알지 못했습니다. sessionStorage의 값을 직접 가져오려면 종료 후 효과를 보려면 새로 고쳐야 합니다. 추가됨:

vuex 저장소와 로컬 저장소(localstorage, sessionstorage)의 차이점을 살펴보겠습니다.1 가장 중요한 차이점: vuex는 메모리에 저장되는 반면 localstorage는 파일 형식으로 로컬에 저장됩니다. 2. 응용 시나리오: vuex는 구성 요소 간에 값을 전송하는 데 사용되는 반면, localstorage는 주로 서로 다른 페이지 간에 값을 전송하는 데 사용됩니다.

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

참고: 많은 학생들은 vuex 대신 로컬 저장소를 사용할 수 있다고 생각합니다. 데이터가 변경되지 않은 경우 실제로 가능하지만 두 구성 요소가 데이터 소스(

object

또는

array

)를 공유하는 경우 구성 요소 중 하나가 데이터를 변경하면 source , 다른 구성 요소가 변경 사항에 응답하도록 하려면 localstorage가 이를 수행할 수 없습니다. 이유는 차이점 1입니다.

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

Angular에서 페이지의 부분 인쇄를 구현하는 단계에 대한 자세한 설명

vue의 공통 구성 요소 사용에 대한 자세한 설명

위 내용은 Vuex 페이지 새로 고침 후 데이터 삭제를 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!