Piniaで状態管理をするとき、UI側がストアの値を直接書き換えられると
「いつ・どこで状態が変わったか」が曖昧になり、UIの破綻やバグの温床になります。
ストアの状態は computed で読み取り専用に公開し、
更新は 明示的なアクションのみに限定しています。
この構文パターンが「壊れないUI」に効くので紹介します。
余談ですが、Pinia可愛い
結論
- ストアの状態は
computed(() => state.value)で外に出す - 更新は必ずストアの
setXxx()のような関数を経由する - UI側は 読むだけ にすることで壊れにくくなる
実例（サイドバー付きのサイト）
// app-store.ts
const activeFunction = ref<number>(queryParameterStore.activeFunction);
const setActiveFunction = async (functionNo: number) => {
activeFunction.value = functionNo;
// 副作用はここに集約
void log(functionNo);
};
return {
activeFunction: computed(() => activeFunction.value),
setActiveFunction,
};
// MainSideBar.vue 側
const activeAAATab = appStore.activeFunction;
UI側は activeFunction を 読むだけ
変更したいときは setActiveFunction() を必ず通る
なぜ安全なのか？
- 勝手な書き換えを封じる → 更新経路が1つになる
- 副作用（ズーム制限・ログ送信など）を
setXXXに集約できる - 「状態が壊れる」バグをデバッグしやすくなる
まとめ
Piniaでは「状態を読む」ことと「更新する」ことを分離するのが重要。
computed を返して 読み取り専用 にすることで、UIは壊れにくくなります。
このパターンは小さいアプリでも大規模でも効くので、
まずは「公開は computed、更新は setXxx」から始めるのがおすすめです。