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
  };
};

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...

Route

April 01 2023

Route url에 따라 보여줄 vue를 정하자