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」から始めるのがおすすめです。