Vuejs store 의 state 메모리 최적화

vuex store 에 저장될 state 들을 vuex-persistedstate 로 로컬스토리지에 저장할시 기본적으로 반응형을 위한 속성들을 포함하여 생성됩니다.
반응형으로 모든 데이터를 생성하게 되면,
데이터가 만단위를 넘어갈시 느려지는 현상이 발생하게 되는데요.
이때 Object.freeze() 를 통해 reactivity 속성들 없이 데이터를 업데이트 해줍니다.

코드 예시

mutations: {
    resetState(state) {
      const initial = initialStates()
      Object.keys(initial).forEach((key) => {
        state[key] = initial[key]
      })
    },
    // state 반응형으로 업데이트 (반응형 속성 o)
    updateState(state, payload) {
      Object.keys(payload).forEach((key) => {
        state[key] = payload[key]
      })
    },
    // state 정적값으로만 업데이트 (반응형 속성 x)
    freezeState(state, payload) {
      Object.keys(payload).forEach((key) => {
        state[key] = Object.freeze(payload[key])
      })
    },
  },
actions: {
    setState({ commit }, payload) {
      commit("updateState", payload)
    },
    freezeState({ commit }, payload) {
      commit("freezeState", payload)
    },
  },

<template>
  <h1>Home</h1>
  <router-link to="/about">about</router-link>
  <br />
  <router-link to="/intro">home</router-link>
  <p>{{ test }}</p>
  <v-btn @click="freeze">freeze</v-btn>
  <v-btn @click="observeTest">observe</v-btn>
</template>

<script>
export default {
  name: "HomeView",
  computed: {
    test: (vm) => vm.$store.getters["base/getTest"],
  },
  methods: {
    freeze() {
      this.$store.dispatch("base/freezeState", { test: { f: { f1: "" } } })
      console.log("freeze Obj : ", this.test)
    },
    observeTest() {
      this.$store.dispatch("base/setState", { test: { o: { o1: "" } } })
      console.log("reactivity obj : ", this.test)
    },
  },
}
</script>