Vue の状態管理: Vuex の代わりに Pinia を使用する

1. ピニアとは何ですか?

Pinia 、 vuexチームのメンバーによって開発された、 vueの状態管理ソリューションです。多くのvuex5提案を実装し、より軽量で、 devtoolsをサポートしています。

vuex4 typescriptのサポートが不十分であると批判されており、 vuex5も遅れています。

そこでピナの出現がありました

vuex との比較:

pinia typescriptサポートするために複雑なラッパーを作成する必要がありません。TypeScript typescript型判定を自然にサポートし、IDE がもたらす自動補完を享受し、開発の精神的負担を軽減し、Vue 開発プロセスにおける文字列指向プログラミングを軽減します。
コードの冗長性を減らすために、ミューテーションの概念を削除し、 state 、 getters 、 anctionsの概念のみを残しました。
手動でストアを追加する必要はありません。作成されたストアは使用時に自動的に追加されます。
moduleの概念はありません。1つのストアの下にネストされた多くのモジュールに直面する必要はありません。単一のファイルストア（redux / toolkitのreducerのようなもの）を使用し、他のストアを直接インポートして使用できます。

Pinia のドキュメントには次のように書かれています:

Pinia は、Vuex の哲学に可能な限り近づくよう努めています。これは、Vuex の次のイテレーションの提案をテストすることを目的としていましたが、現在 Pinia で使用されている API と非常によく似た API を備えた Vuex 5 のオープン RFC が存在するため、成功しました。なお、Pania の作者である私 (Eduardo) は Vue.js コアチームの一員であり、Router や Vuex などの API の設計に積極的に参加しました。このプロジェクトにおける私の個人的な意図は、Vue の親しみやすい哲学を維持しながら、グローバルストアの使用エクスペリエンスを再設計することでした。私は Pania の API を Vuex にできるだけ近づけて、将来的に簡単に Vuex に移行したり、2 つのプロジェクトを (Vuex の下で) 統合したりできるようにしました。

つまり、今Piniaを学ぶことは、事前に Vuex5 を学ぶことと同じです。

2. Piniaは使いやすい

まず、vite+vue+tsプロジェクトを初期化します

pnpm create vite pinia-demo -- --template vue-ts

piniaをインストールする

pnpmとpinia

プロジェクトを開き、srcディレクトリのmain.tsファイルを編集し、Piniaをインポートします。

//メイン.ts

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。

'pinia' から {createPinia} をインポートします

createApp(App).use(createPinia()).mount('#app')

srcディレクトリに状態管理を保存するためのstoreフォルダを作成し、 counter.tsを作成します。簡単なカウンター状態アプリケーションを作ってみましょう。

'pinia' から {defineStore} をインポートします

エクスポートconst useCounterStore = defineStore('counter', {
  状態: () => {
    戻る {
      カウント: 0,
    }
  },
  ゲッター: {
    ダブルカウント: (状態) => 状態.count * 2、
  },
  アクション: {
    インクリメント() {
      this.count++
    },
  },
})

Pinia defineStore関数を通じてstoreを作成し、 storeとstoreオプションを識別するためのidを受け取ります。

optionsを返すためにコールバック関数を使用することもできます。コールバック関数本体の記述方法は、 vueのsetup()メソッドに似ています。たとえば、上記の定義は次のように記述できます。

エクスポートconst useCounterStore = defineStore('counter', () => {
  定数カウント = ref(0)
  関数 doubleCount() {
    count.value * 2 を返す
  }
  関数の増分() {
    カウント値++
  }

  戻り値 { count, increment }
})

次にApp.vueのstoreを使用します

<スクリプト設定 lang="ts">
'./store/counter' から { useCounterStore } をインポートします。
定数useCounter = useCounterStore()
</スクリプト>

<テンプレート>
  <h2>{{ カウンタを使う }}</h2>
  <h2>{{ useCounter.count }}</h2>
  <h2>{{ useCounter.doubleCount() }}</h2>
  <button @click="useCounter.increment">増加</button>
</テンプレート>

<スタイル>
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

Piniaを使用する過程で、自動補完が非常に優れていることがわかります。

ブラウザは次のように実行されます。

開発者ツールを開いてvue devtoolを表示します

vue devtool 、 Piniaステータスの追加、削除、変更、およびチェックをサポートしています。

Pinia には状態を変更する複数の方法があります。

上記のactionsを使用します
状態を直接変更する

定数 countPlus_1 = useCounter.count++

オプションとコールバック関数の両方をサポートするstoreの$patch関数を使用します。コールバック関数は、配列である状態や、変更のために状態メソッドを呼び出す必要があるその他の状態に適しています。

const countPlus_2 = useCounter.$patch({ count: useCounter.count + 1 })

const countPlus_3 = useCounter.$patch((state) => state.count++)

状態構造にはStoreToRefs関数を使用する必要があります

const { count } = storeToRefs(useCounter)

3. ユーザーエクスペリエンス

Pinia 、学習と使用が非常にユーザーフレンドリーです。公式ドキュメントを読んで始めることができます。プロセス中に、 vuexよりも高速で、優れたコーディングエクスペリエンスがあることをはっきりと実感できます。

小規模なプロジェクトの場合、状態管理は利便性と速度を重視しているため（必要ない場合もあります）、vuex は少し複雑です。vue3 がbetaでリリースされたとき、 provideやinjectなどの複合apiを使用してvuex置き換えることができるという人もいたので、軽量な状態管理ソリューションであるPiniaの登場は非常にタイムリーです。

Vuex の代わりに Pinia を使用した Vue 状態管理に関するこの記事はこれで終わりです。Vuex の代わりに Pinia を使用する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: