Pinia의 state를 그대로 읽어들이기

import { defineStore } from 'pinia';

export const useDiariesStore = defineStore('useDiariesStore', {
  // TypeScript에서 타입 체킹을 위해 초기화 값을 넣어줌
  state: () => ({
    diaries: [{ id: 0, title: '', contents: '', date: new Date() }],
  }),
  getters: {
    getDiaries: (state) => state.diaries,
  },
});

이 다이어리 pinia store에서 diaries를 Vue 컴포넌트에서 접근해보자

 

<template>
  <div>
      <card-view-container>
        <card-view-box
          @click="handleRoute(`/${DIARY_DETAIL}/${diary.id}`)"
          class="card-view-box"
          :key="diary.id"
          v-for="diary in diaries.diaries"
        >
          <div :class="['card-view-box', { 'fixed-width': isFixedWidth }]">
            <div class="teacher-info-inner-container">
              <div class="teacher-info-box">
                <p class="teacher-name-label">
                  {{ diary.title }}
                </p>
                <plain-text color="sub-default" fontSize="small">
                  {{ getDate(diary.date) }}
                </plain-text>
                <div class="section-box">
                  <plain-text fontWeight="700">{{ diary.contents }}</plain-text>
                </div>
              </div>
            </div>
            <font-awesome-icon
              class="teacher-route-button"
              icon="fa-solid fa-chevron-right"
            />
          </div>
        </card-view-box>
      </card-view-container>
      <div class="write-diary-wrapper">
        <a-button @clickHandler="handleRoute(`/${DIARY}/${WRITE_MY_DIARY}`)"
          >일기쓰기</a-button
        >
      </div>
  </div>
</template>
<script lang="ts">
import CardViewContainerVue from "@/components/CardViewContainer.vue";
import { defineComponent, ref, watch } from "vue";
import CardViewBox from "@/components/CardViewBox.vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
import PlainTextVue from "@/components/PlainText.vue";
import { useRouter } from "vue-router";
import { DIARY, DIARY_DETAIL, WRITE_MY_DIARY } from "@/constants/urls";
import AButtonVue from "@/components/AButton.vue";
import { db } from "@/hooks/useFirestore";
import { doc, getDoc } from "firebase/firestore";
import useAuth from "@/hooks/useAuth";
import { getDate } from "../../utils/getDate";
import { useDiariesStore } from "../../store/diaries";

library.add(faChevronRight);

interface IDiary {
  title: string;
  id: number;
  date: Date;
  contents: string;
}

export default defineComponent({
  components: {
    "card-view-container": CardViewContainerVue,
    "card-view-box": CardViewBox,
    "plain-text": PlainTextVue,
    "a-button": AButtonVue,
  },
  props: ["isFixedWidth"],
  setup() {
    const diaries = useDiariesStore();
    const diarys = ref<IDiary[]>([]);

	// setup 이 부분에서는 diaries를 콘솔 찍어보면
    // Proxy Object로 찍힌다.
    // watch에서 newVal을 이용해서
    // pinia에 있는 diaries 객체를 할당시키고
    // 이를 ref or reactive로 정의한 객체를 이용해서
    // setup에서 사용한다
    
    // proxy 객체로 찍힌 것도,
    // 위의 template에서보면 value로 풀어져서 나옴

    watch(diaries, (newVal) => {
      diarys.value = newVal.diaries;
    });

    return {
      diaries,
      diarys,
    };
  },
});
</script>