[vue] pinia 전역변수 사용하기

 

 

 

pinia 전역변수

 

 

pinia 설치하기

npm install pinia

 

 

main.js

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

const pinia = createPinia();
const app = createApp(App);

app.use(pinia);
app.use(router);
app.mount("#app");

pinia import 하고 use작성

 

 

 

useMemberStore.js

import { defineStore } from "pinia";

//전역저장소 생성
export const useMemberStore = defineStore('member', {
    state: () => ({ // 상태 변수
        name: 'test01',
        age: 10
    }),

    actions: {  //함수형
        incrementAge() {
            this.age++; 
        }
    }
});

stores 폴더 제작하여 전역저장소( useMemberStore.js ) 생성

상태변수와 함수형태로 쓸 수 있습니다.

 

 

OnePage.vue

<template>
  <h2>1번 페이지</h2>
  <h3>{{ $route.params.idx }}</h3>

  <button @click="test">버튼</button>
  {{ memberStore.name }}
  {{ memberStore.age }}
</template>

<script>
import { useMemberStore } from '@/stores/useMemberStore';

export default {
  name: 'OnePage',
  setup() {
    const memberStore = useMemberStore(); // Pinia 스토어를 가져오기

    const test = () => {
      memberStore.incrementAge();
    };

    return { // 템플릿에서 사용할 변수와 메소드 반환
      memberStore,
      test
    };
  },
  mounted() {
    console.log(this.$route.params.idx);
    console.log(this.memberStore.name);
    console.log(this.memberStore.age);
  }
}
</script>

이런식으로 가져다 쓸 수 있습니다.

 

버튼누르면 age값도 잘 증가합니다.