【 Vue.js 】piniaの「storeToRefs」とは

ポートフォリオ用アプリにpiniaを使っていますが、まだ無知に等しい状態なので備忘録です。

storeToRefsとは

Piniaのユーティリティ関数。リアクティブ性を担保しながら、Storeからプロパティを参照するために使用します。

〇ユーティリティ関数とは
再利用可能な処理として簡単に呼び出せるように作成される小さな関数のことです。ユーティリティ関数を使用するｋとでコードが整理され、可読性とメンテナンス性が向上します。

例

src/store/food.js

import { defineStore } from "pinia";
import { allFoods } from "../http/food-api";
import { ref } from "vue";

export const useFoodStore = defineStore('foodStore', () => {
    const foods = ref([]);

    const fetchAllFoods = async () => {
        const { data } = await allFoods();
        foods.value = data.data;
    }

    return {
        foods,
        fetchAllFoods,
    };
});

src/pages/Foods/NewFoodPage.vue

<script setup>
import { onMounted, ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useFoodStore } from '../../stores/food';
import api from "../../http/api";

const foodStore = useFoodStore()
const { foods } = storeToRefs(foodStore)
const { fetchAllFoods } = foodStore

onMounted(async () => {
    await fetchAllFoods()
})

</script>

また、storeToRefsを使うで.valueを使って値を取得できるようになります。