Vue 상태관리 라이브러리 Pinia

[bgyoons]

해당 학습 부분 목차

11주차 · 파트 04 [DAY 53] Vue (9)

학습 내용

// main.ts

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

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

// store/count.ts

import { defineStore } from "pinia";

export const useCountStore = defineStore('count', {
  // 반드시 함수
  state: () => ({
    count: 0
  }),
  // 계산된 상태
  getters: {
    double(state) {
      return state.count * 2;
    }
  },
  // 상태 변경
  actions: {
    increase() {
      this.count += 1;
    },
    decrease() {
      this.count -= 1;
    }
  }
});

// App.vue

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

const countStore = useCountStore();
// countStore.$reset(); // countStore에 있는 모든 상태를 초기화
</script>

<template>
  <h1>{{ countStore.count }}</h1>
  <h1>{{ countStore.double }}</h1>
  <button @click="countStore.increase">increase</button>
  <button @click="countStore.decrease">decrease</button>
</template>