始めに

現在、Vue3を用いてフロントエンド開発をしており、状態管理としてPiniaを使用しています。
開発中に状態管理された変数の値が変わるたびにその値を使用した処理を行う必要がありました。
そこで、Piniaの標準機能を用いた方法を活用するととても簡単に実装できたので記事にしようと思います。

Piniaとは

Vue.jsのコアチームの1人でVueRouterの開発者でもあるEduardo San Martin Morote氏によって開発が進められ、2019年にリリースされたコンパクトで使いやすい状態管理ツールです。
Vue3では状態管理ツールとして、Piniaを使用することが推奨されています。

基本的なPiniaの使い方は以下の記事をご参考ください！
とても分かりやすくまとめられていましたので勝手ながら紹介させていただきます。
【Pinia】Vue3標準状態管理ツールPinia入門

状態管理されている変数の変更をトリガーとして処理を行う方法

基本的な使い方をわかっていることを前提として次は、状態管理されている変数を監視して、値の変更が起きた時になんらかの処理を実行する方法です。

Piniaが標準で用意してくれているものを扱えばよいだけなのでとても簡単で,$subscribeを使用するだけです。
これによって状態が更新されるたびにコールバック関数が呼ばれます。
例えば以下のようになります。

import { useCounterStore } from '../store/count.js';
const counterStore = useCounterStore();

counterStore.$subscribe((mutation, state) => {
  console.log(state.count)
});

状態の新しい値がstate引数に含まれるので、コールバック関数内でstateを使用すると更新後の変数を扱うことができます。

まとめ

Piniaにはほかにも便利な機能が用意されているのでぜひ使ってみてください！