로컬 저장소의 데이터를 사용하여 저장소를 초기화하는 방법?

로컬 저장소의 데이터를 사용하여 저장소를 초기화하는 방법?

나는 Vue(3)와 Vuex를 배운다.

나는 이 가게를 가지고 있다.

export default new Vuex.Store({
      state: {
        user: null
      },
    
      mutations: {
        setUserData (state, userData) {
          state.user = userData
          console.log('userData')
          console.log(userData)
          localStorage.setItem('user', JSON.stringify(userData))
          axios.defaults.headers.common.Authorization = `Bearer ${userData.access_token}`
        },
    
        clearUserData () {
          localStorage.removeItem('user')
          location.reload()
        }
      },
    
      actions: {
        login ({ commit }, credentials) {
          return axios
            .post('/login', credentials)
            .then(({ data }) => {
              commit('setUserData', data)
            })
        },
    
        logout ({ commit }) {
          commit('clearUserData')
        }
      },
    
      getters: {
        isLogged: state => !!state.user,
        user: state => state.user
      },

구성 요소에서 다음과 같이 사용자를 연결하십시오.

<script>

import { mapGetters } from 'vuex'
export default {

  computed: {
    ...mapGetters({
      user: 'user'
    })
  },

  data () {
    return {
      stores: [],
      loading: false
    }
  },

  created () {
    console.log('toto')
    console.log(this.user.id)
    this.getStores()
  },

사용자가 처음 로그인할 때 정상 작동:콘솔에서 user.id을 볼 수 있다.

그러나 페이지를 새로 고치면(사용자가 연결되어 있으면), user.id은 정의되지 않는다.

내 질문은 로컬 저장소에 사용자가 있을 경우 사용자를 저장소에 어떻게 저장할지 입니다.

초기 상태 값은 에서 직접 로드할 수 있음localStorage:

state: {
   user: JSON.parse(localStorage.getItem('user'))
},

당신이 사용한 이후로JSON.stringify설정 시 사용JSON.parse받을 때

보다 일반적인 솔루션은 전체 상태를 로컬 스토리지에 유지하는 플러그인을 사용하는 것이 될 수 있으며, 이러한 방식으로 개별 값을 처리할 필요가 없으며 사용자가 refresh를 눌러도 전체 애플리케이션을 사용할 수 있다.

https://www.npmjs.com/package/vuex-persist

보다 세밀한 제어와 동시에 문자열보다 더 복잡한 데이터 유형을 저장하는 기능을 원한다면 localForage를 살펴보십시오.

https://www.npmjs.com/package/localforage

참조URL: https://stackoverflow.com/questions/65048123/how-to-init-the-store-with-data-from-the-localstorage