Pinia 状態管理ツール (迅速な実装)

1. 以下は、pinia の理解です (すでに知っている場合は、実装コードを参照するまで飛ばしてください)。

Pinia は、vue エコシステムにおける Vuex の代替となる、まったく新しい vue 状態管理ライブラリです。Vue3 が正式版になった後、You Yuxi が強く推奨したプロジェクトは Pinia です。
まずは Pinia が Vuex よりも優れている点、つまり Pinia の 5 つの大きな利点を見てみましょう。

Vue2 と Vue3 を非常によくサポートできます。つまり、古いプロジェクトでも Ponia を使用できます。
ミューテーションの操作を放棄し、状態、ゲッター、アクションのみにすることで、状態管理ライブラリの使用が大幅に簡素化され、コードの作成がより簡単かつ直感的になります。
ネストされたモジュールは必要なく、コードをよりフラットにするために Vue3 の複合 API に準拠しています。
TypeScript の完全なサポート。Vue3 バージョンの主な利点は TypeScript のサポートであるため、Ponia も完全なサポートを実現しています。Vuex に精通している場合は、Vuex の TS 構文サポートが完全ではないことを知っておく必要があります (よく苦情が言われています)。
コードはより簡潔になり、適切な自動コードセグメンテーションを実現できます。Vue2の時代は、コードを書くときに画面を行ったり来たりして変数を探す必要があり非常に面倒でしたが、Vue3のComposition APIはこの問題を見事に解決しました。自動コード分割が実現でき、pinia もこの利点を継承しています。
この5点はちょっと多すぎると言われれば覚えられません。簡単にまとめると、Pinia の利点は、より簡潔な構文、Vue3 の Comboposition API の完全なサポート、および TypesCcript の完全なサポートです。これらの利点とYou Yuxiの強い推奨事項です。個人的には、Ponia は近いうちに Vuex を完全に置き換え、Vue3 に最適な状態管理ライブラリになると考えています。

1. まず、プロジェクトに Pinia がインストールされていることを確認します。

npm install pinia

2. 次に、store.jsPonia Store インスタンスを定義してエクスポートするためのというファイルを作成します。

import { createPinia } from 'pinia';

const store = createPinia();

export default store;

3. 次に、状態を使用する必要があるコンポーネントに Pinia を導入し、作成された Store インスタンスを使用します。

<template>
  <div>
    <h1>Count: {
   
   { count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore } from 'pinia'; // 导入 useStore

export default defineComponent({
  setup() {
    const store = useStore(); // 使用 useStore 获取 Store 实例

    const increment = () => {
      store.count++; // 更新状态：自增 count
    };

    const decrement = () => {
      store.count--; // 更新状态：自减 count
    };

    return {
      count: store.count, // 访问状态：获取当前的 count 值
      increment,
      decrement,
    };
  },
});
</script>

4. 最後に、Ponia をルートコンポーネントにインストールし、アプリケーションに Store インスタンスを提供します。

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store); // 安装 Pinia 并提供 Store 实例
app.mount('#app');

5. 概要:

これで、簡単な Pinia 状態管理の例が完了しました。この例では、useStoreStore インスタンスを定義し、コンポーネント内の関数を使用してそのインスタンスを取得することにより、コンポーネント内で状態にアクセスして更新できます。

実際のプロジェクトでは、要件に応じてさまざまな Store インスタンスを作成し、複数のモジュールに分割してさまざまな状態を管理できることに注意してください。Pinia は、アクション、ゲッター、プラグインなどの他の機能も提供しており、プロジェクトのニーズに応じてさらに調査して使用できます。

知らせ！: vuex と pinia の違い、pinia は軽量の状態管理ウェアハウスであり、ミューション操作を放棄します。より軽量な
pinia は小規模なプロジェクトに適しているか、複雑さが低いことに適しているか、データの状態が混沌としていなく、複雑ではない場合は、使用します。 pinia 問題ありません。
大規模なプロジェクトや複雑性が高く、ロジックやデータの状態がより複雑な場合は、より圧力に強く、状態が豊富な vuex を使用する方が良いでしょう。

Pinia 状態管理ツール (迅速な実装)

おすすめ