[ Nuxt ] pinia 적용하기 | persist | 저장소 바꾸기

기본 적용

설치

npm install pinia @pinia/nuxt

 

 

config

export default defineNuxtConfig({
  modules: [
    "@pinia/nuxt",
  ],
})

 

 

store

stores 디텍토리 생성 후 하위 store 파일 생성

(nuxt는 stores 폴더 내에 정의된 모든 store을 auto imports 한다.)

export default defineStore("userStore", () => {
  const user = ref({
    name: "Yong",
    id: 1,
    number: "123",
  });
  return { user };
});

 

 

사용

<template>
  <div class="col-span-6 p-10">
    <input v-model="name" type="text" />
    <button @click="setUserInfo">변경</button>
    ➡
    {{ user.name }}
  </div>
</template>

<script setup lang="ts">
  const { user } = useUserStore();
  const name = ref("");

  const setUserInfo = () => {
	  // store 변수 변경
    user.name = name.value;
  };
</script>

 

그러나 이 경우 새로고침 시 store의 값이 휘발된다. (default로 초기화)

 

 

 

---

persist

Usage with Nuxt | Pinia Plugin Persistedstate

 

설치

npm i pinia-plugin-persistedstate

 

 

config

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt', // required
    'pinia-plugin-persistedstate/nuxt',
  ],
})

 

 

store

export default defineStore(
  "userStore",
  () => {
    const user = ref({
      name: "Yong",
      id: 1,
      number: "123",
    });
    return { user };
  },
  {
    persist: true,
  },
);

 

 

 

 

---

저장소 변경

디폴트 저장소는 cookie

 

저장소를 바꾸고 싶다면?

➡ sessionStorage 또는 localStorage로 변경 가능하다. (그러나 client-side only이기 때문에 주의해서 사용)

 

 

기본 저장소를 바꾸려고 할 때

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    'pinia-plugin-persistedstate/nuxt'
  ],
  piniaPluginPersistedstate: {
    storage: 'sessionStorage',
  },
})

 

 

해당 store의 저장소만 바꾸려고 할 때

export default defineStore(
  "userStore",
  () => {
    const user = ref({
      name: "Yong",
      id: 1,
      number: "123",
    });
    return { user };
  },
  {
    persist: {
      storage: piniaPluginPersistedstate.sessionStorage(),
    },
  },
);