4. PINIA simplified

PINIA 와 VUEX 의 가장 큰 차이점 중 하나는 PINIA 가 모듈식으로 설계되었다는 것이다.

즉, PINIA는 여러 개의 STORE를 가질 수 있다.
이에 비해 VUEX는 저장소가 하나만있고 그 아래에 하위 모듈을 가질 수 있다.

<script setup lang="ts">
// 필요한 곳에 스토어를 불러와 추가할 수 있다.
// 번들러는 코드를 분할하고 더 나은 기능을 제공한다.
import { useProductStore } from './stores/product';
</script>

TypeScript / MUTATIONS

위와 같은 특징으로 번들러는 코드를 분할하고 더 나은 TypeScript 추론을 수행할 수 있다.
또 다른 차이는 VUEX에는 MUTATIONS 작업과 GETTERS가 있지만 PINIA에는 MUTATIONS가 없고 STATE, GETTERS, ACTIONS만 있다.

VUEX

PINIA

여기에는 그럴만한 이유가있다.
이전에는 컴포넌트가 정확히 언제 변경되는지 확인하기 위해 필요한 개발자 창에 툴을 추가하려면 MUTATIONS가 필요했다.
하지만 U3 핵심 기능이 많이 노출되어있으므로 특정 변형 없이도 STATE가 언제 변경되는지 정확하게 확인할 수 있다. (개발자창이 많이 발전했다는 뜻인듯)

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');

stores/counter.js

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
    state: () => {
        return {
            count: 0,
        }
    },
    actions: {
        increment(val = 1) {
            this.count += val;
        },
        async waitAndAdd() {
            setTimeout(() => {
                this.count++;
            }, 2000)
        }
    },
    getters: {
        doubleCount: state => state.count * 2,
    },
})

App.vue

<script setup>
import { storeToRefs } from 'pinia';
import { useCounterStore } from './stores/counter';

const store = useCounterStore();
// const { count } = store; // NOT REACTIVE
// console.log(count); // 0
const { count } = storeToRefs(store); // REACTIVE
console.log(count); // REF
store.count++;
store.increment(2);
</script>

<template>
  <h1>Count is {{ store.count }}</h1>
  <h2>Double is {{ store.doubleCount }}</h2>
  <button @click="store.increment(1)">Increment</button>
  <button @click="store.waitAndAdd">Wait + Increment</button>
</template>