Vue の新世代状態管理ライブラリ - Pinia について知る

ピニアとは何ですか?使い方？この記事では、Vue の新世代の状態管理ライブラリ - Pinia について説明します。お役に立てば幸いです。

Pinia とは

Pinia (スペイン語でパイナップル) は本質的には依然として 州管理ライブラリ、コンポーネントおよびページ間での状態共有に使用されます。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

pinia と vuex の違い:

• よりフレンドリーな TypeScript サポート、Vuex は以前 TS をサポートしていましたサポートは非​​常に不親切です

• #Vuex と比較して、Ponia は儀式が少なく、よりシンプルな API を提供し、Composition-API スタイルの API

• モジュールの入れ子構造はもうありません
  ##名前空間の概念はなくなり、それらの複雑な関係を覚えておく必要はありません。

• #Pinia の使用方法

1. pinia をインストールします

yarn add pinia

2. pinia を作成します

// src/stores/index.js
import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

//main.js
import pinia from './stores'

app.use(pinia)

理解ストア

ストア (Pinia など) は、コンポーネント ツリーにバインドされた

状態とビジネス ロジック を保持するエンティティです。つまり、グローバル状態とともに保存されます

、state、getter、actions を含む状態を管理するストアを任意の数定義できます

1. ストアを定義する

ストアはdefineStore(),

• を使用して定義されており、最初のパラメータが渡されるため、一意の名前が必要です

2. ストアを使用する

操作状態

状態はストアの中核部分であり、ストアは状態管理を実装するために使用されます。

#方法 1: 状態を 1 つずつ直接変更する

方法 2: 複数の状態を一度に変更する
• #方法 3: 状態を置き換える
• 方法 4: 状態をリセット

##Getters

1 . 理解するそして、getters

Getters

を定義すると、Store の計算されたプロパティと同等になります。

は、defineStore();# の getters 属性を使用して定義できます。

##ゲッターは状態をパラメーターとして受け取る関数を定義できます;

#2. ゲッターへのアクセス

• 方法 1: 現在のストアのゲッターにアクセスする

方法 2: Getters で独自の他のゲッターにアクセス

• ##方法 3: 他のストアのゲッターにアクセスする

• ##

  getters: {
      // 1. 基本使用
      debouleCount(state) {
        return state.count * 2
      },
      // 2. 一个 getters 引入另外一个 getters
      useDebouleCount() {
        return this.debouleCount + 2
      },
      // 3. getter也支持返回一个函数
      getFriendById(state) {
        return function (id) {
          for (let i = 0; i <strong></strong>

#アクションを理解して定義する

• アクションは、コンポーネント内のメソッドとして理解できます。ゲッターと同様に、ストア インスタンス全体のすべての操作は、アクション内のこれを通じてアクセスできます。

Action は非同期操作をサポートしているため、await を使用できます。

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 ！

以上がVue の新世代状態管理ライブラリ - Pinia について知るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。