4. Vue 상태관리

react든 vue든 상태관리를 한다.
vue에서 vuex가 메이저한편이긴 한데 vue3로 넘어와서는 pinia가 각광받는다.

여기서는 pinia를 차용해서 설명하겠다. vuex도 근데 크게 다르지 않는다.

나는 route든 store든 index.ts를 두고 그 index.ts가 다른 여러개의 pinia, route 따위등을 참조하는것을 선호한다.
코드가 너무 길어지게되면 눈에 들어오지 않고, 기능별로 분류가 되어있는 편이 오류를 수정하기에도 적합하기 때문이다.

store는 일반적으로 페이지가 변경되어도 같은 싱글페이지안에서는 상태가 유지된다.

그래서 유저 로그인 정보나 권한 정보 로딩 언어설정따위를 저장해두곤한다.

import { defineStore } from "pinia";

export const useCustomStore = defineStore("custom",
  state: () => {
    return {
      isData: false,
      data: null as Data | null,
    };
  },
    actions: {
    customActionSet(data:Data) {
      this.$state.isData = true;
      this.$state.data = data;
      
    },
    customActionDel() {
      this.$state.isData = false;
      this.$state.data = data;
    }
  },
    persist: {
    // storage: localStorage
    storage: sessionStorage
  }
}

*Data는 타입으로 다른 타입형식을 차용해도 동작
이런 형식이다~~ 라는 것

persist는 영속 위치를 정하는 걸로 로컬/세션에 저장하겠다~~