vuejs의 vuex에서 sessionStorage 사용법

안녕하세요, Yo플레입니다.

오늘은 vuejs의 vuex에서 sessionStorage 사용법을 알아보겠습니다.

사실 vuex를 사용하였을 때 sessionStorage의 동작이 이상해서 이 글을 포스팅하게 되었습니다.

예제 보러 가기

App.vue

<template>
  <div id="app">
    <SessionComp />
  </div>
</template>

<script>
import SessionComp from "./components/SessionComp";

export default {
  name: "App",
  components: {
    SessionComp,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

SessonComp.vue

<template>
  <div>
    <div>
      <input v-model="text" type="text" />
      <button @click="setData">SetDataToVuex</button>
    </div>
    <div>
      <button @click="getData">GetDataFromVuex</button>
      <div>fromVuex : {{ sessionData }}</div>
    </div>
    <div>
      <button @click="getSessionData">getDataFromSessionStorage</button>
      <div>fromSessionStorage : {{ sessionData2 }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      sessionData: "",
      sessionData2: "",
    };
  },
  computed: {
    data() {
      return this.$store.getters.getData;
    },
  },
  methods: {
    setData() {
      console.log("comp setData");
      this.$store.dispatch("SET_DATA", this.text);
    },
    getData() {
      console.log("comp getData", this.data);
      this.sessionData = this.data;
    },
    getSessionData() {
      console.log(sessionStorage.getItem("data"));
      this.sessionData2 = sessionStorage.getItem("data");
    },
  },
};
</script>
<style scoped>
div {
  margin: 10px;
  text-align: left;
}
</style>

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    test: ""
  },
  getters: {
    getData(state) {
      console.log("mutations:getData");
      return sessionStorage.getItem("data");
    }
  },
  mutations: {
    SET_DATA(state, payload) {
      console.log("mutations:SET_DATA", payload);
      sessionStorage.setItem("data", payload);
    }
  },
  actions: {
    SET_DATA(context, payload) {
      console.log("actions:SET_DATA");
      context.commit("SET_DATA", payload);
    }
  }
});

문제가 되는 부분은 vuex에서 sessionStorage에 접근해서 데이터를 가져오는 부분입니다.

예제를 보시면 아시겠지만 vuex를 통해서 sessionStorage.getItem('data')하는 부분에서 정상적으로 데이터를 가져오지 못합니다.

이럴 때는 Component에서 직접 sessionStorage.getItem('data')를 호출하여 데이터를 가져오시면 됩니다.

감사합니다.