Pinia store state 초기화 방법

---

Object syntext에서 초기화 방법

<script setup>
import { useStore } from './useStore'

const store = useStore()

store.$reset

</script>

Function syntex에서 초기화 방법

// plugins/resetStore.ts
import cloneDeep from 'lodash.clonedeep' //1

export default function resetStore({ store }) {
  const initialState = cloneDeep(store.$state) // 2
  store.$reset = () => store.$patch(cloneDeep(initialState)) // 3
}

1. lodash의 deepcopy 함수를 사용해서 초기값을 복사한다.
2. store의 state를 초기값으로 변경하는 $reset 함수를 선언한다.
3. deepcopy한 초기값을 다시 deepcopy해서 referenece(참조)를 제거 하는것이 중요하다.

.

// main.ts
...

import resetStore from '@/plugins/pinia/resetStore'
const app = createApp(App)
app.use(createPinia().use(resetStore))

...

• resetStore를 pinia에 등록한다.

.

// component.vue
...
<script lang="ts" setup>
  const store = useStore()

  onBeforeUnmount(() => {
  	store.$reset()

  })
<script>

• 위의 예시는 컴포넌트가 unmount되기 전 스토어의 state를 초기화하는 로직이다.

---

참고

• https://dev.to/the_one/pinia-how-to-reset-stores-created-with-functionsetup-syntax-1b74