PINIA 사용법

PINIA

    [출처](https://velog.io/@sehyunny/advantages-of-pinia-vs-vuex)  

    [공홈](https://pinia.vuejs.org/)

 

---

목차

1. [설치]
2. [main.js 업데이트]
3. [store 파일 생성] 
4. [사용]

---

설치

yarn add pinia
or 
npm install pinia

main.js 업데이트

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

const app = createApp(App);

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

store 파일 생성

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
    state: () => {
        return { count: 0 };
    },
    actions: {
        increment(value = 1) {
            this.count += value;
        },
    },
    getters: {
        doubleCount: (state) => {
            return state.count * 2;
        },
        doublePlusOne() {
            return this.doubleCount + 1
        },
    },
});

사용

 <script setup>
     import { useCounterStore } from "./stores/counter";
     const store = useCounterStore();
 </script>
 <template>
     <h1>Count is {{ store.count }}</h1>
     <h2>Double is {{ store.doubleCount }}</h2>
     <button @click="store.increment()">Increment</button>
 </template>