ピニアとは何ですか？ Vueでどうやって使うの？

ピニアとは何ですか?ピニアを使用する理由この記事では、pinia の紹介と、pinia の基本的な使い方を例を交えて紹介しますので、お役に立てれば幸いです。

ピニアとは何ですか?

Pinia は元々、 Composition API を使用して Vue ストアの外観を再設計するための 2019 年 11 月頃の実験でした。それ以降、元の原則は同じですが、Pinia は Vue 2 と Vue 3 の両方で動作し、コンポジション API を使用する必要はありません。 と SSR のインストールを除けば、両方の API は同じであり、ドキュメントは Vue 3 に固有であり、 では Vue 2 と SSR に必要な箇所に Vue 2 に関するメモが記載されています。 Vue 3ユーザーなら読める！ [関連する推奨事項: vue.js ビデオ チュートリアル

]

Ponia を使用する理由

Pinia は、コンポーネント/ページ間で状態を共有できる Vue のリポジトリです。 ç これは単一ページ アプリケーションの場合に当てはまりますが、サーバー側でレンダリングされる場合、 アプリケーションがセキュリティの脆弱性にさらされることになります。

ただし、単一ページの小さなアプリケーションであっても、Ponia を使用すると多くのメリットが得られます。

• 開発ツールはアクションの追跡をサポートします。突然変異タイムライン
  • ストアは、それを使用するコンポーネントに表示されます
  • タイムトラベルとデバッグの容易化
ホット モジュールの交換

• ページを再読み込みせずにストアを変更します
  • 開発中に既存の状態を維持します
プラグイン: プラグインを使用して Ponia の機能を拡張します
JS ユーザーに適切な TypeScript サポートを提供する、または
• オートコンプリート機能を提供する
  #サーバー側レンダリングのサポート

• # #基本的な例

API 的には pinia を使用すると次のようになります (完全な手順については、

「はじめに」

を必ず確認してください)。まずストアを作成します:

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // could also be defined as
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

それからコンポーネント で それを使用します:

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // with autocompletion ✨
    counter.$patch({ count: counter.count + 1 })
    // or using an action instead
    counter.increment()
  },
}

また、関数を使用することもできます (コンポーネント setup( ) ) より高度なユースケース向けにストアを定義するには:

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

まだ setup()Composition API に慣れていない場合でも、心配しないでください。Ponia はVuex

などの

##Map Assistant の同様のセット。ストレージも同じ方法で定義しますが、mapStores()、mapState()、または mapActions() を使用します。各 マップ アシスタントの詳細については、「コア コンセプト」を参照してください。

ピニアを選ぶ理由

ピニア (英語の「ピーニャ」のように

/piːnjʌ/

と発音) が最も近いです piña (スペイン語では

pineapple

)。これは有効なパッケージ名です。パイナップルは、実際には個々の花が集まって複数の果実を形成するグループです。店舗と同じように、それぞれが独立して生まれますが、最終的にはすべてがつながっています。南米原産のおいしいトロピカルフルーツでもあります。 より現実的な例これは、JavaScript でも Ponia の型を使用する API のより完全な例です。人によっては、これ以上読まなくても十分に始めることができるかもしれませんが、ドキュメントの残りの部分を確認するか、この例をスキップして

Core Concepts

をすべて読むことをお勧めします。

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

const useUserStore = defineStore('user', {
  // ...
})

export default {
  computed: {
    // other computed properties
    // ...
    // gives access to this.counterStore and this.userStore
    ...mapStores(useCounterStore, useUserStore)
    // gives read access to this.count and this.double
    ...mapState(useCounterStore, ['count', 'double']),
  },
  methods: {
    // gives access to this.increment()
    ...mapActions(useCounterStore, ['increment']),
  },
}

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

RFC

Vuex は RFC を通じてコミュニティから可能な限り多くのフィードバックを収集しますが、Ponia は収集しません。私は、アプリの開発、他の人のコードの読み取り、Pinia を使用したクライアントでの作業、Discord での質問への回答などの経験に基づいてアイデアをテストします。これにより、さまざまな状況やアプリケーションの規模にわたって機能する効率的なソリューションを提供できるようになります。私は頻繁にリリースし、コア API を変更せずにライブラリを進化させ続けます。

Vuex 3.x/4.x

Vuex 3.x は Vuex の Vue 2 であり、Vuex 4.x は Vuex 3

Ponia API は Vuex ≤4 とは大きく異なります。つまり、

• Mutation は存在しません。 非常に冗長とみなされることがよくあります。彼らは当初 devtools の統合を導入しましたが、それはもはや問題ではありません。
• TypeScript をサポートするためにカスタムの複雑なラッパーを作成する必要はなく、すべてが型指定されており、API は可能な限り TS 型推論を活用するように設計されています。
• マジック文字列を挿入したり、関数をインポートしたり、呼び出したりする必要はもうありません。オートコンプリートをお楽しみください。
• ストアを動的に追加する必要はありません。ストアはすべてデフォルトで動的であるため、気付かないほどです。ストアを使用していつでも手動でサインアップできますが、これは自動であるため、心配する必要はありません。
• モジュールの入れ子構造はもう必要ありません。別のストア内でストアをインポートして using することで、暗黙的にストアをネストすることもできますが、Pinia は、ストア間の相互組み合わせをサポートしながら、設計によりフラットな構造を提供します。 ストアに対して循環依存関係を持つこともできます。
• モジュール (名前空間なし)。ストアのフラットなアーキテクチャを考慮すると、「名前空間付き」ストアはその定義方法に固有のものであり、すべてのストアが名前空間付きであると言えるでしょう。

既存の Vuex ≤4 プロジェクトを変換して Pinia を使用する方法の詳細については、Vuex からの移行ガイドを参照してください。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がピニアとは何ですか？ Vueでどうやって使うの？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。