Vue 또는 Nuxt 응용 프로그램으로 작업한 적이 있다면 세션 관리, 쿠키 저장 및 localStorage 작업에 어려움을 겪었을 것입니다.

운 좋게도 이 모든 것을 도와줄 vuex-persistedstate 패키지가 있습니다.

패키지를 설치하고 프로젝트에 맞게 구성하기만 하면 됩니다. 그게 다야 모든 브라우저 새로 고침은 애플리케이션 상태에 영향을 미치지 않습니다.

설치

npm install vuex-persistedstate // npm
// OR
yarn add vuex-persistedstate // yarn

용법

vuex-persistedstate 3.x(Vuex 3 및 Vue 2용)

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});

vuex-persistedstate 4.x(Vuex 4 및 Vue 3용)

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});

Nuxt.js를 사용한 예

plugins 디렉토리 안에 파일persistedState.client.js을 생성합니다.

참고: 플러그인 이름을 'xxx.client.js'로 지정하면 클라이언트 측에서만 실행됩니다. Learn more

// ~/plugins/persistedState.client.js
import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState()(store)
}

그런 다음 nuxt.config.js 파일 내에서 플러그인을 업데이트하십시오.

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [{ src: '~/plugins/persistedState.client.js' }],

이제 Nuxt.js 애플리케이션은 상태 지속성이 있으며 수동 브라우저 새로 고침을 처리할 수 있습니다.

그것이 이 포스트에 대한 것입니다.

Vue.js 애플리케이션에서 어떻게 작동하는지 보고 싶다면 아래에 댓글을 남겨주세요. 저도 포함하겠습니다.

라이브 데모 사용 vuex-persistedstate : https://magic-nuxtjs.vercel.app/login

내 How to add Magic Link to a Nuxt.js Application 가이드에서 vuex-persistedstate를 사용했습니다. 확인하고 피드백을 공유하세요.