vuex 페이지를 새로 고친 후 데이터를 저장할 수 없는 경우 해결 방법

이번에는 vuex 페이지를 새로 고친 후 데이터를 저장할 수 없는 경우 처리 방법을 알려 드리겠습니다. vuex 페이지를 새로 고친 후 데이터를 저장할 수 없는 경우의 주의 사항은 무엇입니까? 살펴보자.

1.Cause

2.Solution

localStorage에는 시간 제한이 없습니다. 즉, 세션, 브라우저가 닫힐 때 세션이 종료되고 시간 제한이 있으며 자체 Baidu가 있습니다

여기서 sessionStorage를 사용합니다. 여기서 주목해야 할 점은 vuex의 변수는 반응하지만, vuex에서 상태를 변경할 때 sessionStorage는 반응하지 않는다는 것입니다. , 구성 요소는 변경 사항을 감지하지 않으며 변경 사항을 보려면 페이지를 새로 고쳐야 하므로 구성 요소가 응답적으로 변경될 수 있도록 vuex의 상태를 가져와야 합니다. 구현

application 배경은 사용자가 로그인 후 상태를 저장하고 종료 후 상태를 제거하는 것입니다. 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에서 값 가져오기)

4.나중의 말

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

추가됨:

vuex 저장소와 로컬 저장소(localstorage, sessionstorage)의 차이점을 살펴보겠습니다.1 가장 중요한 차이점: vuex는 메모리에 저장되는 반면 localstorage는 파일 형식으로 로컬에 저장됩니다.

2. 응용 시나리오: vuex는 구성 요소 간에 값을 전송하는 데 사용되는 반면, localstorage는 주로 서로 다른 페이지 간에 값을 전송하는 데 사용됩니다.

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

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

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

추천 도서:

JS가 2차원 배열 행과 열을 변환하는 방법

redux-thunk 실제 프로젝트 사례 자세한 설명

위 내용은 vuex 페이지를 새로 고친 후 데이터를 저장할 수 없는 경우 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!