src/main.js

import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia());

src/stores/counter.js

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 1,
  }),
  getters: {
    doubleCount: state => state.counter * 2,
    doubleCountPlusOne() {
      return this.doubleCount + 1;
    },
  },
  actions: {
    increament() {
      this.counter++;
    },
  },
});

vue

<template>
  
    <p>counter: {{ store.counter }}</p>
    <p>counter2: {{ counter }}</p>
    <p>doubleCount: {{ store.doubleCount }}</p>
    <button @click="store.increament()">Click!!</button>
    <p>doubleCountPlusOne: {{ store.doubleCountPlusOne }}</p>
    <button @click="increament()">Click!!</button>
    
</template>


import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
const store = useCounterStore(); // reactive 타입
//const { count } = useCounterStore(); // 반응성을 잃는다.
const { counter } = storeToRefs(store);
const { increament } = store; // 반응형이 아니라 함수라 가능

composable 사용시 src/composables/counter.js


import { useCounterStore } from '@/stores/alert';
import { storeToRefs } from 'pinia';

export const useAlert = () => {
  const { counter } = storeToRefs(useAlertStore());
  const { increament } = useAlertStore();
  return {
    counter,
    increament
  };
};

댓글 쓰기