Use store in vue component

컴포넌트 내부에서 스토어 사용하기

action 사용하기

전 페이지에서 생성한 스토어를 SFC 내부에서 사용해봅니다. 임의의 컴포넌트를 생성하세요.

UserDataExample.vue

<template>
  <div>
    <button @click="fetchData">Fetch User Data</button>
    <p v-if="isUserLoggedIn">User is logged in</p>
  </div>
</template>

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

export default {
  setup() {
    const userStore = useUserStore();

    // Method to trigger the action
    const fetchData = () => {
      userStore.fetchUserData('123'); // Assuming '123' is the userId
    };

    return { 
      fetchData,
      isUserLoggedIn: userStore.isUserLoggedIn
    };
  },
};
</script>

Action, getter 사용하기

useStore.fetchUserData 와 같이 스토어에서 바로 action 값을 가져다가 사용하면 됩니다. getter도 마찬가지입니다.

상태값 조회하기

위 예제에서 setup 함수 내부에서 반환하는 isUserLoggedIn 는 userStore.isUserLoggedIn과 같이 스토어를 직접 참조합니다. 이렇게 구조분해를 사용하지 않는 경우 Pinia store에서 reactivity를 유지하기 때문에 아무런 문제가 없습니다.

storeToRefs

구조분해를 할 때는 Pinia에서 제공하는 storeToRefs를 사용해야 합니다.

import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/userStore';

export default {
  setup() {
    const userStore = useUserStore();
    
    // Using storeToRefs to maintain reactivity of individual properties from the Pinia store
    const { userData, loading, error } = storeToRefs(userStore);

    return { userData, loading, error };
  },
};

use storeToRefs remain Ref

destructuring can't remain Ref

getter와 action은 storeToRefs를 적용하지 않고 바로 사용합니다.