[Vue3] session Store /Local Store Tip

Vue3에서는 store를 사용 할 수 있다. 

 

devTool에서 보면 아래와 같이 로컬 저장소와 세션 저장소가 존재 한다.

 

로컬 저장소는 키-값 으로 저장된 값을 재 방문시 사용하는 것이 가능 하고 

 

세션 저장소는 브라우저가 닫히면 삭제 되는 것이다.

 

 

 

따라서 저장소를 사용하게 된다면 세션 저장소를 사용 하게 될것이다.

 

중요한 점은 세션 저장소가 새탭을 열었을때나 SamSite Lax값에 따라서 다른 도메인으로 인식하는 사이트간에는 공유 되지 않는다는것

 

 

 

아래는 도메인이 같으나 같은 세션 저장소를 사용 할 수 없다.

a.happynuri.com 

b.happynuri.com 

 

 

store를 등록할때는 src 하위에 store 폴더를 추가 하고 아래와 같은 구조를 추가 한다 

 

import VueCookies from 'vue-cookies'

import { defineStore } from 'pinia'

import { installOptions } from '@/modules/menus/main'

import {

  MenuApi,

  MenuItemModel, 

} from 'mik-common/src/api-autogen/menu'

export const useMenuStore = defineStore('menu', {

  persist: [

    {

      paths: ['menuData'],

      storage: sessionStorage //세션 스토리지를 사용한다.

    }

  ],

  state: () => ({

    menuData: [] as MenuItemModel[]  

  }),

  getters: {

    getItems(state) {

      return state.menuData   //간단하게 조작하여 return 하는 경우에만 추가한다.

    }

  },

  actions: {

    async fetchItems(langCode?: string, url?: string) {

 

//공통으로 사용할 api를 추가 한다.

 

          const menuApi = new MenuApi()

          const response = await menuApi.v1MenuGet(

            url

          )

          if (response.data.success && response.data.data) {

            const data = response.data

          }

  

})

export interface IGlobalMenu {

  menuData: MenuItemModel[] //외부에서 사용할 것이므로 export를 한다.

}

 

 

위의 구조를 이용해서 store를 사용 할 수 있다.