Vue 3 + Typescript에서 pinia로 상점 만들기

Pinia는 Vue의 새로운 상태 관리 시스템이며 이 기사에서는 Typescript와 간단한 예제를 통해 이 놀라운 도구를 사용하는 두 가지 방법을 보여드리겠습니다.

1 - Typescript 어설션이 있는 단순 스토어

import { defineStore } from "pinia";
import type { MyInterface } from "@/types";

type RootState = {
  myState: MyInterface[];
};

const useMyStore = defineStore("franchiseStore", {
  state: () =>
    ({
      myState: [],
    } as RootState),
  actions: {
    setCurrentState(state: MyInterface[]) {
      this.myState = state
    },
  },
});

export default useMyStore;

2 - Typescript 어설션을 사용하고 Composition API를 사용하는 간단한 저장

import { defineStore } from 'pinia';
import { ref } from 'vue';
import type { MyInterface } from '@/types'

export const useMyStore = defineStore('myStore', () => {

  const myState = ref<Array<MyInterface>>([]);

  function setCurrentState(state: MyInterface[]) {
    myState.value = state
  }

  return { myState, setCurrentState };
});

export default useMyStore;