Create Store, State, Action, Getters

Stores, State, Actions, Getters,

Stores

모듈 VS 다중 스토어듯이 Pinia에서는 여러개의 스토어가 존재하고 각 스토어는 특정 도메인에 종속되는 상태값들을 정의합니다.

여러개의 스토어를 정의한 모습

스토어 생성하기

stores/index.js

먼저 Pinia 스토어를 생성합니다.

import { createPinia } from "pinia";

export function setupPinia() {
  const pinia = createPinia()
  return pinia
}

main.js

앱에 연결해줍니다.

const pinia =  setupPinia();

export const app = createApp(App)
  .use(pinia)
  .use(router)
  .use(logPlugin);

스토어 생성하기

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  // ...
})

defineStore api를 사용해 리액트의 훅을 선언하듯이 생성합니다.

State, getters, actions

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state:() => ({
    userData: null,
    loading: false,
    error: null
  }),
  getters: {
    isUserLoggedIn: state => !!state.userData,
  },
  actions: {
    async fetchUserData(userId) {
      this.loading = true;
      const response = await http.get("/user",{ userId});
      this.userData = response;
    }
  }
})

Vuex와 다르게 mutation이 없습니다.

actions에서 비동기 호출과 상태 업데이트를 같이 하며 getters는 state 값을 이용해 computed 값을 반환합니다.

한가지 아쉬운 점은 this context를 사용한다는 점입니다.

State

반응형 데이터를 선언하는 부분입니다.

예제 코드에서는 데이터 패칭을 할 때 보여지는 로딩 상태들도 같이 선언했습니다.

Actions

비동기 호출 혹은 상태 업데이트가 일어나는 메소드를 정의하는 곳입니다.

Getters

state에서 파생된 값들을 선언합니다.