kazuki.m

Appearance

sumnail

Pinia の分割代入

created at : 2024/08/31

Pinia
Vue3

Pinia の分割代入 ​

Pinia では、分割代入を使って状態管理をすることができます。

分割代入を使うことで、コンポーネント内で状態を直接参照することができ、コードがシンプルになります。

注意

そのまま分割代入を使うとリアクティブが解除されるため、storeToRefs を使用する必要があります。

分割代入の使い方 ​

分割代入を使って、状態を参照する方法を紹介します。

storeToRefs ​

stateやgettersは、storeToRefs を使うことでリアクティブな状態を保持したまま分割代入ができます。

仮に、storeToRefs を使わない場合、リアクティブな状態が解除されてしまいます。

また、actionsは、storeToRefs で分割代入することができません。

直接 useXXXX（任意の store）のメソッドを分割代入できます。

sample ​

ボタンを押下するとカウンターが増減します。

Counter: 0

Double Counter: 0

コードは以下の通りです。

vue
<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <p>Double Counter: {{ doubleCounter }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script setup lang="ts">
import { useCounter } from "../../../.vitepress/theme/stores/counter";
import { storeToRefs } from "pinia";

const store = useCounter();
const { counter, doubleCounter } = storeToRefs(store);
const { increment, decrement } = store;
</script>

<style scoped>
p {
  font-size: 20px;
}
button {
  margin: 8px;
  padding: 8px 16px;
  background-color: var(--secondary-color);
  border-radius: 8px;
}
</style>

まとめ ​

Pinia の分割代入の使い方を紹介しました。

参考 ​