Vue 3으로 데이터 유지

예전에는 그렇게 늙지는 않았지만 내가 여기서 가는 곳을 알 수 있습니다! 어쨌든, Vue 2에는 Vuex가 있었고, Vue 3에는 여전히 Vuex가 있지만 어쨌든 저는 장황합니다.

따라서 새로 고치거나 다시 로드할 때 구성 요소 내에 유지해야 하는 일부 데이터가 있다고 상상해 보십시오. 그 데이터는 사용자가 데이터와 상호 작용하거나 어떤 이유로 수정해야 할 때 그대로 유지되어야 했습니다. 이제 Vue 2로 돌아가서 Vuex 스토어를 사용한 다음 상태를 LocalStorage 또는 SessionStorage로 유지하는 패키지를 사용합니다. Vuex는 저장소를 유지한 다음 새로 고침 시 저장소에 데이터를 유지하고 페이지가 다시 로드되면 저장소 데이터를 가져와 저장소로 반환합니다.



이것이 현재 Vue 3으로 업그레이드된 Vue 2에서 수행한 방법입니다. Vue 3은 이 글을 작성할 당시 Vue 지속과 함께 작동하지 않으며 데이터를 항상 사용할 수 있도록 하는 새로운 방법을 찾아야 합니다. 어떻게 하죠? 글쎄, 우리는 Vuex라는 중개인을 제거하고 브라우저의 로컬 저장소로 직접 이동하여 이를 수행합니다.

아래 코드를 예로 들어 보겠습니다.

// Sets an item with a Key to local storage
const saveStorage = function(key, data) {
    localStorage.setItem(key, JSON.stringify(data));
};

보시다시피 두 개의 매개변수를 받는 간단한 함수가 있습니다. 첫 번째는 키이고 '사용자' 또는 '토큰'과 같은 저장소 항목의 이름이며 데이터를 가져옵니다. 이제 로컬 스토리지 또는 세션 스토리지는 문자열만 처리하므로 데이터를 전달하기 전에 JSON.stringify가 수행하는 문자열로 변환해야 합니다.

완벽하지? 그렇다면 다음과 같은 기능을 사용하여 스토리지 데이터를 어떻게 얻습니까?

// Looks for a local storage item and returns if present
const getStorage = function(key, item) {
    if( localStorage.getItem(key) && item) {
        const data = JSON.parse(localStorage.getItem(key))
        return data[item]
    }
    else if(localStorage.getItem(key)) {
       return localStorage.getItem(key)
    }
};

그래서 우리는 여기에서 두 가지 시나리오로 작업하고 있습니다.

일부 데이터의 일부가 필요합니다. 따라서 우리는 20명의 사용자 목록을 가질 수 있고 사용자 19를 원합니다. 따라서 키는 '사용자'이고 항목은 '19'입니다. 그런 다음 객체를 사용할 수 있도록 반환 데이터를 구문 분석합니다.

모든 데이터를 되찾고 함수에 키를 제공하기만 하면 됩니다. '토큰' 또는 '사용자'와 같은 것

마지막으로 더 이상 필요하지 않거나 사이트를 탐색할 때 파기할 데이터를 지우는 방법이 필요합니다.

// Clear a single item or the whole local storage
const clearStorage = function(key='false') {
    if(key) {
        localStorage.removeItem(key);
    } else {
        localStorage.clear();
    }
}

다시 두 가지 시나리오가 있습니다.

키를 제공하고 데이터의 특정 부분만 제거하려고 합니다.

전체 저장소를 지우고 새로 시작하려고 합니다.

정말 잘 작동하고 Vue SPA에서 데이터를 정말 쉽게 처리할 수 있으며 모든 구성 요소가 단일 데이터 소스에 액세스할 수 있습니다!

전체 파일은 다음과 같아야 하며 작동 방식에 대한 몇 가지 실제 사례는 아래 비디오를 확인하십시오.

// Sets an item with a Key to local storage
const saveStorage = function(key, data) {
    localStorage.setItem(key, JSON.stringify(data));
};

// Looks for a local storage item and returns if present
const getStorage = function(key, item) {
    if( localStorage.getItem(key) && item) {
        const data = JSON.parse(localStorage.getItem(key))
        return data[item]
    }
    else if(localStorage.getItem(key)) {
       return localStorage.getItem(key)
    }
};

// Clear a single item or the whole local storage
const clearStorage = function(key='false') {
    if(key) {
        localStorage.removeItem(key);
    } else {
        localStorage.clear();
    }
}
// Exports all avaliable functions on the script
export {getStorage, saveStorage, clearStorage}

들러 주셔서 감사합니다. 즐거운 코딩하세요!