소개

Vue 3와 Typescript 및 Vue 스토어 Pinia를 사용하여 식료품 목록 애플리케이션을 빌드해 봅시다! 방금 Pinia에 대한 문서 게시에 대해 트윗한 것을 알았으므로 이 스토어를 사용하여 간단한 애플리케이션을 만들 수 있는 방법을 공유해야겠다고 생각했습니다.

Pinia 스토어의 아주 기본적인 구현만 다룰 것입니다.

전제 조건

이 문서는 다음 항목에 대한 기본 지식과 이해 또는 친숙함을 가정합니다.

Vue 3(구성 API)

타입스크립트

상태 관리가 무엇인지에 대한 사전 이해

저는 이 애플리케이션에 TypeScript를 사용할 것이므로 최소한 기본 유형 주석을 이해하시기 바랍니다. 그렇지 않으면 바로 시작하여 이 앱을 빌드해 봅시다!

설치

Vue CLI가 아직 설치되어 있지 않은 경우 설치했는지 확인하고 Vue CLI가 아직 업데이트되지 않은 경우 최신 버전인지 확인하십시오.

$ npm i -g @vue/cli

Linux 배포판에 있는 경우 Vue CLI를 전역적으로 설치하므로 명령 시작 부분에 sudo를 추가합니다.

완료되면 Vue CLI에 Vue 3 프로젝트를 스캐폴딩하도록 요청합니다. Vue 3을 선택했는지 확인하십시오.

$ vue create vue-3-pinia-grocery-app

완료되면 앱으로 이동하여 IDE에서 프로젝트를 엽니다.

$ cd vue-3-pinia-grocery-app && code .

그런 다음 설탕인 TypeScript를 추가하겠습니다.

$ vue add typescript

지금은 이것이 내가 선택한 옵션이므로 원하는 경우 직접 선택할 수 있습니다.



다음은 이 프로젝트의 의존성으로 Pinia를 설치하는 것입니다.

$ npm install pinia@next

그리고 마지막으로 faker를 설치합니다. 저는 이 튜토리얼을 위한 양식을 만드는 데 게을러서 양식을 만들고 유효성을 검사하는 것이 일종의 범위를 벗어난 일이기 때문입니다. 따라서 작업을 빠르게 하기 위해 이 가짜 패키지에서 임의의 데이터를 생성해 보겠습니다.

$ npm install faker
$ npm install --save @types/faker

$ npm install uuid
$ npm install --save-dev @types/uuid

빠른 데이터 생성을 위해 일부 가짜 데이터를 사용할 계획이기 때문에. 항목을 생성하기 위해 generateFakeData()라는 메서드가 있으므로 모델 코드를 업데이트하십시오.

import { v4 as uuidv4 } from "uuid";
import * as faker from "faker";

export interface Item {
  id: string;
  name: string;
  description?: string;
  quantity: number;
  createdAt: Date;
  deletedAt?: Date;
}

export function generateFakeData(): Item {
  return {
    id: uuidv4(),
    quantity: Math.random(),
    name: faker.lorem.word(),
    description: faker.lorem.words(),
    createdAt: new Date(),
  };
}

완료되면 Vue 애플리케이션을 실행해 보겠습니다.

$ npm run serve

데이터 모델

Grocery List 애플리케이션을 구축하고 있으므로 데이터를 모델링해야 합니다. 가지고 있어야 할 핵심 모델은 아이템입니다.

따라서 모델을 정의하려면

export interface Item {
  id: string;
  name: string;
  description?: string;
  quantity: number;
  createdAt: Date;
  deletedAt?: Date;
}

따라서 src 디렉토리 아래에 models 디렉토리를 만들고 이 디렉토리에 이 항목 모델이 상주할 것입니다. 따라서 파일 이름을 item.model.ts로 만드십시오.

그럼 우리는 다음을 갖게 될 것입니다.

피니아 설정

main.ts 디렉토리 아래의 src 파일을 열고 다음 메서드use()를 연결하고 첫 번째 매개변수로 createPinia()를 전달합니다.

import { createPinia } from "pinia";
import { createApp } from "vue";
import App from "./App.vue";

createApp(App)
  .use(createPinia())
  .mount("#app");

다음은 디렉토리를 생성하고 이름을 store로 지정하고 그 안에 index.ts라는 파일을 생성합니다.

그런 다음 이 본점을 정의하려면

import { generateFakeData, Item } from "@/models/item.model";
import { defineStore } from "pinia";

export type RootState = {
  items: Item[];
};

export const useMainStore = defineStore({
  id: "mainStore",
  state: () =>
    ({
      items: [],
    } as RootState),

  actions: {
    createNewItem(item: Item) {
      if (!item) return;

      this.items.push(item);
    },

    updateItem(id: string, payload: Item) {
      if (!id || !payload) return;

      const index = this.findIndexById(id);

      if (index !== -1) {
        this.items[index] = generateFakeData();
      }
    },

    deleteItem(id: string) {
      const index = this.findIndexById(id);

      if (index === -1) return;

      this.items.splice(index, 1);
    },

    findIndexById(id: string) {
      return this.items.findIndex((item) => item.id === id);
    },
  },
});

우리는 장보기 목록에서 항목을 삭제하고 생성하는 가장 기본적인 기능을 정의했습니다. 그리고 Pinia를 Vue 스토어로 설정하는 방법을 알기에 충분합니다.

데모

이게 제일 보기 좋은 UI... 네.



Demo

이 설정에서 볼 수 있듯이 Pinia 스토어를 사용하여 항목을 추가하고 업데이트하고 삭제할 수 있습니다.

요약

Vue 3 및 TypeScript로 Pinia를 설정하는 방법을 배웠습니다. 내가 Pinia를 좋아하는 이유는 이미 TypeScript로 구축되었기 때문입니다. 즉, 스토어에서 우리가 원하는 모든 자동 완성 기능과 TypeScript를 좋아하는 이유를 제공합니다. Pinia는 또한 Vuex가 구현되는 방식과 매우 유사하다는 것을 알 수 있는 매우 직관적입니다.

그러나 official documentation에서 읽을 수 있는 더 많은 기능이 있습니다.

이 정보가 도움이 되었기를 바랍니다. 건배!

전체 소스 코드는 repository에서 찾을 수 있습니다.