source

페이지 새로 고침 후 쿠키 저장소가 있는 Vuex 상태가 손실됨

gigabyte 2022. 8. 18. 23:46
반응형

페이지 새로 고침 후 쿠키 저장소가 있는 Vuex 상태가 손실됨

쿠키 스토리지와 함께 Vuex를 사용하고 있지만 F5 페이지 새로 고침을 실행하면 상태가 손실됩니다.이유를 알 수가 없어요.

"secure" 옵션을 "true"와 "false"에서 전환하려고 했지만 수정되지 않습니다.IIS를 사용하여 로컬 환경에서 테스트하고 있습니다.

*를 'js-cookie'에서 쿠키로 Import하고, createPersistedState를 'vuex-persistedstate'에서 Import한다.

기본 새 Vuex를 내보냅니다.스토어({

strict: true,
plugins: [

    createPersistedState({
        storage: {
            getItem: key => Cookies.getJSON(key),
            setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
            removeItem: key => Cookies.remove(key)
        }
    })
],

actions,
modules: {

    module1,
    module2,
    module3,
    module4,
    module5,
    module6,
    module7,
    module8,
    module9
}

});

페이지 리프레시 후에 상태가 회복될 것으로 기대하고 있습니다.

답장이 늦어서 죄송합니다.당신의 답변에 감사드립니다.문제는 "getJSON" 메서드가 JSON 문자열을 역직렬화하고 "vuex-persistedstate" 라이브러리가 JSON 문자열을 필요로 한다는 것입니다.이 행을 바꾸면:

getItem: key => Cookies.getJSON(key)

다음과 같이 입력합니다.

getItem: key => Cookies.get(key)

일부 모듈에서 문제가 해결되었습니다.

또한 여러 쿠키를 추가하고 쿠키에 유지되는 상태를 줄였습니다.또 한 가지 문제가 발생한 것은 주 객체에서 모든 필드를 선언하지 않았다는 것입니다.문서에는 Vue.js 데이터 개체와 마찬가지로 반응성이 높기 때문에 이 작업을 수행하도록 명시되어 있습니다.

이게 나처럼 갇힌 사람에게 도움이 되길 바라.

언급URL : https://stackoverflow.com/questions/56056493/vuex-with-cookie-storage-loses-state-after-page-refresh

반응형