🔥VueJS, VueX 및 VueX Persisted State를 사용한 영구 저장소 🔥

때로는 브라우저 로컬 스토리지에 일부 정보를 유지하기 위해 VueJS 웹 앱이 필요합니다. 로컬 설정, 계정 정보 또는 일부 토큰일 수 있습니다. 페이지가 새로고침되면 절대 잃어버리고 싶지 않습니다.

이 빠른 예제에서는 vuex 및 vuex-persistedstate를 사용하여 마법을 일으키는 방법을 보여줍니다.

필요한 라이브러리부터 시작하겠습니다!

VueJS 프로젝트를 이미 생성했다고 가정하면 vuex 상태 관리 라이브러리인 추가 종속성이 필요합니다.
npm install --save vuex
시작 시 애플리케이션은 다음과 같아야 합니다.

├── index.html
├── main.js
├── components
│   ├── App.vue

상점 생성을 시작하려면 store 및 components와 동일한 수준에 main.js 디렉토리를 생성해야 합니다.

그런 다음 새로 생성된store 디렉토리 내부에 index.js를 생성할 것입니다. 이는 매장 구성을 위한 참조 진입점이 될 것입니다.

내부store/index.js 파일에서 스토어를 생성하고 애플리케이션에서 사용할 수 있도록 내보낼 것입니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
});

export default store

그게 다야! 우리 가게를 만들었습니다!

이제 프로젝트는 다음과 같아야 합니다.

├── index.html
├── main.js
├── components
│   ├── App.vue
└── store
    ├── index.js

다음 단계는 매장을 전 세계적으로 사용할 수 있도록 만드는 것입니다. 이를 위해 다음과 같이 main.js 파일 내부에서 참조하는 것으로 충분합니다.

import Vue from 'vue'
import App from './components/App'
import store from './store';

Vue.config.productionTip = false

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

놀라운! 그러나 실제 논리는 어떻습니까?

이제 일부 사용자 ID 정보를 저장해야 한다고 가정해 보겠습니다. 기본 기능의 경우 로그인(사용자 ID를 설정함) 및 로그아웃(사용자 ID를 null로 설정함)이 있습니다.

먼저 modules 폴더에 store 디렉토리를 생성해 보겠습니다. 기본 논리modules는 일부 컨텍스트에 따라 저장소를 분리하는 것입니다. 그렇지 않으면 단일 파일과 관리할 수 없는 초대형 저장소로 끝날 수 있습니다.
modules 내부에서 이제 필요한 모든 논리로 account.js를 만들 차례입니다.

const state = {
  userId: null
};

const mutations = {
  logout(state) {
    state.userId = null;
  },
  login(state, userId) {
    state.userId = userId;
  }
};

export default {
  state,
  mutations
}

그래서, 여기서 무슨 일이 일어나고 있습니까?

먼저 userId 라는 단일 변수로 store 속성을 선언합니다. 기본적으로 null 입니다.

다음으로 mutations 및 login 의 두 가지 간단한 함수가 있는 logout 라는 항목이 있습니다. 기본 아이디어vuex는 상점을 직접 변경하지 않고 변경 사항을 커밋한다는 것입니다. 기본적으로 이러한 함수는 커밋 시에만 호출됩니다.

우리 프로젝트는 다음과 같아야 합니다.

├── index.html
├── main.js
├── components
│   ├── App.vue
└── store
    ├── index.js
    ├── modules
         ├── account.js

하지만 새로 생성된 account.js에 대해 매장에서 어떻게 알 수 있습니까? 선언해야 합니다!

우리store/index.js 내부에서 해봅시다:

import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    account,
  }
});

export default store

보시다시피, 우리는 단순히 account.js를 가져와 스토어의 모듈 내에서 참조했습니다. 쉬운!

우리의 놀라운 가게를 시험해 볼 시간입니다!

내부App.vue:

<template>
  <div>
    <div>{{this.userId}}</div>
    <button @click="login()">Login as Nick</button>
    <button @click="logout()">Logout</button>
  </div>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        name: 'app',
        computed: mapState({
            userId: state => state.account.userId
        }),
        methods: {
            login() {
                this.$store.commit('login', 'Nick')
            },
            logout() {
                this.$store.commit('logout')
            }
        },
    }
</script>

이 예제에서는 글로벌 상태를 로컬 저장소 속성으로 변환할 수 있는 mapState vue 속성 내부의 vuex에서 computed를 사용하고 있습니다. 전역 저장소에서 변경된 사항이 있으면 구성 요소 속성에서도 변경됩니다. 결과적으로 this.userId 컨텍스트의 글로벌 저장소에서 직접 매핑되는 account 를 간단히 사용할 수 있습니다.

다음으로 login 및 logout 두 가지 방법을 사용합니다. 이제 볼 수 있듯이 스토어를 수정하기 위해 이전에 account mutations 속성에 지정된 변경 사항을 커밋합니다.

대박! 우리가 해냈어!

하지만... 페이지를 새로고침하면...

예, 불행히도 지속되지 않습니다.

Chrome에서 Application/Local Storage를 열면 우리의 userId 흔적이 없습니다.

그러나 vuex-persistedstate라는 솔루션이 있습니다!

상태를 로컬 저장소에 유지할 수 있는 플러그인을 설치해 보겠습니다.
npm install --save vuex-persistedstate
바닐라 구성의 경우 다음과 같이 플러그인 내부store/index.js로 참조하는 것으로 충분합니다.

import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

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

export default store

이제 로그인한 후 페이지를 다시 로드하면 브라우저의 로컬 저장소에 유지됩니다!

잘했어, 해냈어! 이제 당신의 앱은 진정으로 물건을 저장할 수 있습니다!

더 많은 참조를 보려면 여기로 이동 => https://vuex.vuejs.org/