VuexからPinia移行に向けて

Transcript

1. Vuex から Pinia 移行に向けて ツノ：@2nofall
2. Pinia の前に：Vue の現状 多くのチームが Vue3 移行に悩むはず CLI ツール(VueCLI → Vite) UI フレームワーク(Vuetify) 状態管理ライブラリ(Vuex → Pinia) その他の破壊的変更... 今回は状態管理ライブラリについて Vuex：Vue 公式のライブラリ(Vuex4 まで) Pinia：Vuex5 として開発
3. What's Pinia? Vue.js の直観的なストア※として、 公式では以下が挙げられています。 直感的 型 セーフ 開発ツールのサポート 拡張 設計によるモジュール式 非常に軽い ※ただし認知度が低い
4. Pinia の現状：認知度 LINE のフロントエンドエンジニアの技術調査アンケートでは、 Pinia はリリースされてしばらくたつが、「聞いたことがない」が半分近く Experience with libraries for StateManagement in Vue：(UITSurvey2022)
5. Pinia の現状：利用度 「Vue での状態管理のためのライブラリの使用」の項目では、 10%程度となかなか浸透されていない状態 Usage of libraries for state management in Vue ：(UITSurvey2022)
6. Pinia を使ってみて:Store 定義 Vue の Options や Composition っぽい書き方ができる Store、Getter、Action を定義できる 例：Composition での書き方 export const useCounterStore = defineStore("counter", () => { const count = ref<number>(0); // Store const doubleCount = computed(() => count.value * 2); // Getter function increment() { count.value++; // Action } return { count, doubleCount, increment }; });
7. Pinia を使ってみて：Store 呼び出し Store を import して呼び出すだけで利用できる Store をリアクティブに使いたい場合は storeToRefs(store) を利用 <script setup lang="ts"> import { useCounterStore } from "./HelloWorld.store"; const store = useCounterStore(); </script> <template> <h1 v-text="store.name" /> <button type="button" @click="store.increment()"> count is {{ store.count }} </button> </template>
8. 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");
9. Pinia を使ってみて：所感 わかった点 Mutation が廃止され、直観的な操作に IDE による入力補完が便利 テストの幅が広がる キャラに愛着が沸く 難しかった点 日本語の情報が少ない（公式含む） Vuex と違いすぎて戸惑う部分がある
10. Vuex から Pinia への移行 手順 公式 Options にマイグレーションを推奨 → Options への移行はステップごとに説明 Mutation 廃止によるモジュール再構築発生 懸念点 グローバルな状態を移行する影響範囲怖い テスト作る工数に時間とられそう
11. EOF