vuex 데이터 페이지 새로 고침 해결 후 초기 화 작업

vue 프로젝트 개발 에 서 는 vuex 로 데 이 터 를 저장 하 는 경우 가 많 지만 개발 과정 에서 새로 고침 후 페이지 의 vuex state 데이터 초기 화 문제 가 발생 합 니 다!다음은 제 가 썼 던 해결책 입 니 다.
1.storage 캐 시 를 이용 하여 vuex 데이터 의 새로 고침 문 제 를 실현 합 니 다.
저 희 는 mutation 등 vuex 방법 에서 데 이 터 를 변경 할 때 데 이 터 를 로 컬 브 라 우 저 캐 시 에 동시에 저장 할 수 있 습 니 다.다음은 내 가 mutation 에서 쓴 방법 이다.

데이터 변경 사항 을 동기 화하 여 저장 할 수도 있 고,페이지 에서 vuex 의 mutation 방법 을 호출 할 때 동기 화 변경 할 수도 있 습 니 다.그러나 이런 방법 은 소량의 데 이 터 를 대상 으로 만 갱신 하지 않 고 유지 할 수 있 을 뿐 실제 카드 머리 에는 적용 되 지 않 는 다.
2.기 존 플러그 인 을 이용 하여 새로운 상 태 를 저장 합 니 다.
일치 하 는 플러그 인 에서 저 는 현재 vuex-along 플러그 인 을 사용 하고 있 습 니 다.이 플러그 인 은 사용 하기에 매우 편리 하고 간결 합 니 다.

cnpm i vuex-along-D 를 통 해 플러그 인 을 다운로드 하여 도입 하고 있 습 니 다.store 에서 plugin 을 통 해 사용 하면 모든 state 의 데 이 터 를 저장 할 수 있 습 니 다.새로 고침 에 응 하지 않 고 변경 할 수 있 습 니 다.물론 일부 데이터 만 저장 하려 면 해당 하 는 플러그 인의 api 를 사용 하여 실현 할 수 있 습 니 다.구체 적 인 api 는 보 세 요github；
위의 코드 는 vuex-along 플러그 인의 사용 을 보 여 주 는 것 일 뿐 프로젝트 의 실제 작성 방법 은 규범 에 맞지 않 습 니 다.일반 프로젝트 에 대해 vuex 의 모든 모듈 을 독립 적 으로 나 누 어 각각 관리 합 니 다.

이 동시에 프로젝트 에서 우 리 는 모두 보조 함 수 를 사용 하여 vuex 의 관 리 를 실현 하고 원생 의 쓰기 방법 을 사용 하지 않 습 니 다.

state 와 getter 의 데 이 터 는 계산 속성 에서 사용 할 수 있 습 니 다.그리고 mutation 과 action 은 methods 방법 에 응 용 됩 니 다.계산 속성 을 수정 하려 면 해당 하 는 setter 를 설정 해 야 합 니 다.
이상 은 순 전 히 자신의 의견 입 니 다.필요 하 다 면 받 아들 여 주세요!
추가 지식:vuex 는 페이지 를 새로 고 칠 때 데이터 가 변 하지 않 습 니 다(vuex 상태 지속 화)
질문:
vue 프로젝트 에서 vuex 를 사용 하여 데이터 상 태 를 관리 합 니 다.페이지 를 새로 고 칠 때 vuex 에서 state 의 데 이 터 를 초기 화 하 는 문제 가 발생 합 니 다(데이터 손실)
해결 방법:
1.웹 스토리 지 캐 시 사용
브 라 우 저 창 이 닫 히 거나 새로 고침 될 때 beforeunload 이벤트 가 발생 합 니 다.이 때 웹 스토리 지 캐 시 를 사용 하여 vuex 가 페이지 를 새로 고침 할 때 데이터 가 변 하지 않 습 니 다.

created(){
  //        sessionStorage      
  this.$store.state.userInfo = window.sessionStorage.getItem("userInfo") 
  //       vuex       sessionStorage 
  window.addEventListener("beforeunload", () => {
    window.sessionStorage.setItem("userInfo", this.$store.state.userInfo)
  })
}

2.vuex 상태 영구 화 플러그 인 vuex-persistedstate 사용
vuex-persistedstate 플러그 인 은 브 라 우 저의 로 컬 저장 소(local storage)를 사용 하여 vuex 의 상태(state)를 영구적 으로 유지 합 니 다.
vuex-persistedstate 설치:
npm install vuex-persistedstate --save-dev
store 폴 더 의 index.js 에서 사용 하기

//  vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
......
export default new Vuex.Store({
 ......
 //  vuex-persistedstate
 plugins: [createPersistedState(
  //   vuex      sessionStorage （     localStorage ）
  { storage: window.sessionStorage }
 )]
})

위 와 같은 vuex 데이터 페이지 리 셋 을 해결 한 후 초기 화 작업 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.