Quasar에서 상수, Enum, 상태(전역변수) 관리하기

개요

 모든 코드에서 공통으로 사용하는 상수와 Enum, 전역변수를 어떻게 관리할지 알아봅시다.

 

상수

 상수를 관리하는 js파일을 하나 만들고 항목을 export로 외부에 노출시켜 줍니다.

 

// src/enums/constants.js
export const APP_TITLE = 'My Quasar App'
export const DEFAULT_LANGUAGE = 'en-US'
// other constants...

 

 선언된 상수를 import 하여 사용합니다.

// src/components/MyComponent.vue
import { APP_TITLE, DEFAULT_LANGUAGE } from 'src/enums/constants'

export default {
  // use constants here...
}

 

 

Enumeration

 Enum를 관리하는 js파일을 하나 만들고 항목을 export로 외부에 노출시켜 줍니다.

 Enum을 정의할때, Object.freeze() 구문을 사용해야 하는데, 이 구문은 내부 데이터 변경이 불가능하게 만들어 줌으로써 Enum의 원소들이 변경되는것을 막아줍니다.

// src/enums/color.js
export const Color = Object.freeze({
  RED: 'red',
  GREEN: 'green',
  BLUE: 'blue'
});

 

 선언되 Enum을 import 하여 사용합니다.

// src/components/MyComponent.vue
import { Color } from './Color.js';

//......
 let myColor = Color.GREEN;
//......

 

 

상태관리(전역 변수)

  vue에서는 컴포넌트간에 데이터를 공유할 일이 발생할때가 존재합니다.

 예를 들어 물건을 구매하고 장바구니에 담았을 때, 구매한 컴포넌트와 장바구니 컴포넌트 사이에는 구매한 물품에 대한 데이터가 공유되어야 합니다.

 

 이럴때는 전역변수를 이용해서 처리하면 되는데, 전역변수는 모든 프로그램에서 사용을 자제하길 권할 정도로 위험한 요소가 많은 변수입니다.

 따라서 전역 데이터 관리하는 객체를 따로 만들어서 관리하는데, Frontend에서는 화면의 변화까지 관리가 함께 이루어지므로, 전역 데이터 관리라는 용어 대신에 상태 관리라고 부릅니다. 

 

  장바구니 상태관리 객체 사용하는 것을 예시(typescript 버전)로 들어보겠습니다.  

  여기서는 가장 사용하기 편리한 pinia를 가지고 진행하겠습니다.(편리하다는 것은 Vuex에 비해서 상대적으로 편리하는것을 의미합니다.)

 

 pinia 설치

   $yarn add pinia

 

 pinia를 Quasar 프로젝트에 플러그인으로 추가하기

   pinia는 설치뿐만 아니라, boot에서 플러그인으로 추가해줘야만 사용이 가능합니다.

   플러그인으로 등록하는 이유는 pinia가 vue 내부적인 구조에 영향을 미치는 요소여서 라고 합니다.

// src/boot/pinia.js 파일을 생성하여 진행
import { createPinia } from 'pinia'

export default ({ app }) => {
  app.use(createPinia())
}

 

// quasar.conf.js

boot: [
  'pinia',
  // other plugins...
],

 

 src/store 폴더를 생성하고, cartStore.ts 파일 생성하여 작성

import { defineStore } from 'pinia';

// 상태(데이터) 타입 정의
interface CartItem {
  id: number;
  name: string;
  quantity: number;
}

// 스토어 정의
export const useCartStore = defineStore('cart', {
  
  // 초기화
  state: () => ({
    items: CartItem[] = [], 
  }),
  
  // 함수 정의
  actions: {
    addItem(item: CartItem) {
      this.items.push(item);
    },
    removeItem(index: number) {
      this.items.splice(index, 1);
    },
  },
});

 

물건 구매를 위한 CartItemAdder.vue 파일 생성하여 작성

<template>
  <div>
    <input v-model="itemName" placeholder="Item name" />
    <input type="number" v-model.number="itemQuantity" min="1" placeholder="Quantity" />
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useCartStore } from './store/cartStore';

const cartStore = useCartStore();
const itemName = ref('');
const itemQuantity = ref(1);

const addItem = () => {
  if (!itemName.value) return;
  cartStore.addItem({
    id: Date.now(), // 간단한 예제를 위해 현재 시간을 ID로 사용
    name: itemName.value,
    quantity: itemQuantity.value,
  });
  itemName.value = '';
  itemQuantity.value = 1;
};
</script>

 

물건 확인을 위한 CartItemList.vue 파일 생성하여 작성

<template>
  <ul>
    <li v-for="(item, index) in cartStore.items" :key="item.id">
      {{ item.name }} - {{ item.quantity }}
      <button @click="cartStore.removeItem(index)">Remove</button>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { useCartStore } from './store/cartStore';

const cartStore = useCartStore();
</script>

 

각각의 vue 파일에서 할당된 cartStore변수는 "cart 상태관리 객체의 참조"로써, 프로그램내의 어디서나 동일한 데이터로 유지되는 것을 확인할 수 있습니다.