【Vue.js】piniaの「storeToRefs」とは何か？まとめてみた

2023年6月26日
2023年6月29日
Vue.js

こんにちは。

野中やすおです。

久しぶりにVue.jsの仕事に関わり出したらVuexがもはやコードに存在せず、Piniaがメインになっていてフロントエンドの変化の速さに戦々恐々する日々です。

そして今回は、Vuexの後継として作られたPiniaのユーティリティ関数であるstoreToRefs関数について解説します。

1 storeToRefsとは？
2 storeToRefsの使い方
3 参考

この記事の目次

storeToRefsとは？

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

storeToRefsの使い方

例えば、以下のようなStoreがPiniaで定義されています。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    },
  },
})

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {

state: () => ({ count: 0 }),

actions: {

increment() {

this.count++

})

storeToRefsを使うと.valueを使って値を取得することができます。

<script setup>
import { storeToRefs } from 'pinia'

const { count, increment } = storeToRefs(useStore())
console.log(count.value) // 0を表示
increment() // count.valueは1になる
</script>