Vuex から Pinia 移行に向けて ツノ：@2nofall 

Pinia の前に：Vue の現状 多くのチームが Vue3 移行に悩むはず CLI ツール(VueCLI → Vite) UI フレームワーク(Vuetify) 状態管理ライブラリ(Vuex → Pinia) その他の破壊的変更... 今回は状態管理ライブラリについて Vuex：Vue 公式のライブラリ(Vuex4 まで) Pinia：Vuex5 として開発 

What's Pinia? Vue.js の直観的なストア※として、 公式では以下が挙げられています。 直感的 型 セーフ 開発ツールのサポート 拡張 設計によるモジュール式 非常に軽い ※ただし認知度が低い 

Pinia の現状：認知度 LINE のフロントエンドエンジニアの技術調査アンケートでは、 Pinia はリリースされてしばらくたつが、「聞いたことがない」が半分近く Experience with libraries for StateManagement in Vue：(UITSurvey2022) 

Pinia の現状：利用度 「Vue での状態管理のためのライブラリの使用」の項目では、 10%程度となかなか浸透されていない状態 Usage of libraries for state management in Vue ：(UITSurvey2022) 

Pinia を使ってみて:Store 定義 Vue の Options や Composition っぽい書き方ができる Store、Getter、Action を定義できる 例：Composition での書き方 export const useCounterStore = defineStore("counter", () => { const count = ref(0); // Store const doubleCount = computed(() => count.value * 2); // Getter function increment() { count.value++; // Action } return { count, doubleCount, increment }; }); 

Pinia を使ってみて：Store 呼び出し Store を import して呼び出すだけで利用できる Store をリアクティブに使いたい場合は storeToRefs(store) を利用 import { useCounterStore } from "./HelloWorld.store"; const store = useCounterStore();

count is {{ store.count }}



Pinia を使ってみて：テスト @pinia/testing の createTestingPinia をマウント時に定義 Action のみ Mock したりできる。Vuex より柔軟にテストが書けそう。 const wrapper = mount(HelloWorld, { global: { plugins: [ createTestingPinia({ initialState: { counter: { count: 100 } } }), ], }, }); const store = useCounterStore(); // Store呼び出し const incrementSpy = vi.spyOn(store, "increment"); // モック化 incrementSpy.mockImplementation(() => (store.count += 2)); wrapper.find("button").trigger("click"); expect(wrapper.text()).toContain("count is 102"); 

Pinia を使ってみて：所感 わかった点 Mutation が廃止され、直観的な操作に IDE による入力補完が便利 テストの幅が広がる キャラに愛着が沸く 難しかった点 日本語の情報が少ない（公式含む） Vuex と違いすぎて戸惑う部分がある 

Vuex から Pinia への移行 手順 公式 Options にマイグレーションを推奨 → Options への移行はステップごとに説明 Mutation 廃止によるモジュール再構築発生 懸念点 グローバルな状態を移行する影響範囲怖い テスト作る工数に時間とられそう 

EOF