Pinia with Vue 사용법!

이 글은 Vue와 Pinia를 사용하면서.. 시행착오가 많았었는데, 제가 다시 읽고 Pinia를 다시 사용할 때 편하기 하기 위해서 작성한 글입니다.

1. Pinia 생성

main.js

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

import "./assets/styles/tailwind.css";

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");

main.js에, router 앞에 createPinia를 사용한다. app.use(createPinia).use(router)와 같이 사용해도 괜찮다.

2. 사용하고 싶은 기능의 Store을 만든다.(이름은 기능 이름 + Store을 사용하면 된다)

/store/Store.ts

import { defineStore } from "pinia";
//필수
import { useAnotherStore } from "./anotherStore";
export const useThisState = defineStore("StoreId", {
    state: (): stateName => ({
    //state 기본 값들
    stateElement1Name :{},
    stateElement2Name :[],
    stateElement3Name : 0
    //기본 값의 구체적인 값
	getters: {
    //vue의 computed의 기능과 유사하다
    getters1():{
    	return this.stateElement1Name
    },
    getters2():{
    const anotherElement = useAnotherStore().anotherStoreElement;
    	return anotherElement + stateElement3Name
        //다른 스토어에서 값을 불러와서 사용할 수 있다
    }
    
    }
    
    actions:{
    //vuedml methods와 기능이 유사하다
    async fetchSomething(){
    	fetch("url")
        .then((response)=>response.json())
		//async도 역시 사용이 가능하다
    }
    }
});

3. 사용할 위치에서 호출

<template>
	<div>
    	
    </div>
</template>

<script>
import { computed } from "vue";
//필수
import { useThisState } from "../store/thisStore";
//필수
export default{
	setup(){
	    return {
            useGetters1 : computed(() => thisState.getters1),
            useGetters2 : computed(() => thisState.getters2),
            useActions2 : computed(() => thisState.fetchSomething),
            //주의 변수를 넎더라도 thisState.getters1(arg1, arg2)과 같이쓰지말고 괄호가 없어야한다
        }
    }
}
</script>

4. 상위 vue에서 Store 호출

import {useThisStore} from "./store/thisStore.vue";
import {useAnotherStore} from "./store/anotherStore.vue";
export default{
    const thisStore=useThisStore()
    const anotherStore=useAnotherStore()
    thisStore.getters1()
    //사용할꺼면 호출
}

 

끝!나머지는 스토어에서 호출한 값을이용하면 된다.