Vue フロントエンド開発補助機能状態管理詳細例

Vue フロントエンド開発補助機能状態管理詳細例

マップ状態

コンポーネントが複数の状態を取得する必要がある場合、これらすべての状態を計算プロパティとして宣言すると、多少の繰り返しと冗長性が生じます。この問題を解決するには、計算されたプロパティを生成する mapState ヘルパー関数を使用します。 mapState が使用されていない場合、オブジェクトの状態は通常、使用されているコンポーネントの computes プロパティから取得され、次のように使用されます。

  //....
  計算: {
        カウント: 関数(){
            this.$store.state.count を返します
        }
    }
 //....    

mapState を使用すると、次のように簡略化できます。

import { mapState } from 'vuex' //mapStateオブジェクトを導入する export default {
  // ...
  計算: mapState({
    // 矢印関数はコードをより簡潔にすることができます count: state => state.count,
  })
}
または import { mapState } from 'vuex' //mapStateオブジェクトを導入 export default {
  // ...
  計算: mapState({
    'count'、//状態名 countAlias と一致する: 'count' //countAlias は参照コンポーネントで使用されるエイリアスです})
}

マップゲッター

mapGetters ヘルパー関数は、state と同様に、ストア内のゲッターをローカルの計算プロパティにマップするだけです。計算関数のコードは次のように簡略化されます。

'vuex' から { mapGetters } をインポートします。
エクスポートデフォルト{
  // ...
  計算: {
  // オブジェクトスプレッド演算子を使用して、計算されたオブジェクトにゲッターを混ぜます...mapGetters([
      'countDouble',
      'CountDoubleAndDouble',
      //..
    ])
  }
}

MapGetters ではエイリアスも使用できます。

マップミューテーション

mapMutations ヘルパー関数を使用して、コンポーネント内のメソッドを store.commit 呼び出しにマップします。簡略化されたコードは次のとおりです。

'vuex' から { mapMutations } をインポートします。
エクスポートデフォルト{
  //..
  メソッド: {
    ...mapMutations([
      'increment' // this.increment() を this.$store.commit('increment') にマップします
    ])、
    ...mapMutations({
      add: 'increment' // this.add() を this.$store.commit('increment') にマップします
    })
  }
}

マップアクション

mapActions ヘルパー関数を使用して、コンポーネント メソッドを store.dispatch 呼び出しにマップします。簡略化されたコードは次のとおりです。

'vuex' から { mapActions } をインポートします。
エクスポートデフォルト{
  //..
  メソッド: {
    ...マップアクション([
      'incrementN' // this.incrementN() を this.$store.dispatch('incrementN') にマップします
    ])、
    ...マップアクション({
      add: 'incrementN' // this.add() を this.$store.dispatch('incrementN') にマップします
    })
  }
}

Vue 状態管理 (II) の例に従って、これは補助関数を使用して実行されます。補助関数は CountChange および ComputeShow コンポーネントで使用され、残りのコードを変更する必要はありません。
ComputeShowでは、mapStateとmapGettersという2つの補助関数が使われています。コードは次のようになります。

<テンプレート>
  <div align="center" style="background-color: ビスク;">
    <p>以下は、computed を使用してストア内のステータスデータを直接取得し、ステータスデータが変更されたときに同期的に更新する方法です。</p>
    <h1>状態を受け取るには computed を使用します: {{ computedState }}</h1>
    <h1>getter を受け取るには computed を使用します: {{ computedGetters }}</h1>
  </div>
</テンプレート>
<スクリプト>
  import { mapState,mapGetters } from 'vuex' //mapState、mapGetters オブジェクトを導入 export default {
    名前: 'ComputeShow',
    計算:{
    ...mapState({
      computedState:'count' //エイリアス: computedState
    })、
    ...mapGetters({
      computedGetters:'getChangeValue' //エイリアス: computedGetters
    })
    }
  }
</スクリプト>
<スタイル>
</スタイル>

マップを使用するときは、ストアのコンテンツから切り離されるようにエイリアスを追加することをお勧めします。 CountChangeでは、mapMutationsとmapActionsという2つの補助関数が使用されています。コードは次のとおりです。

<テンプレート>
  <div align="center">
    <input type="number" v-model="paramValue" />
    <button @click="addNum({res: parseInt(paramValue)})">+増加</button>
    <button @click="subNum">- 減少</button>
  </div>
</テンプレート>
<スクリプト>
  輸入 {
    マップミューテーション、
    マップアクション
  } from 'vuex' //mapMutations、mapActionsオブジェクトを導入 export default {
    名前: 'CountChange',
    データ() {
      戻る {
        パラメータ値: 1,
      }
    },
    メソッド: {
      ...mapMutations({
        subNum: 'sub' //別名subNumを追加
      })、
      ...マップアクション({
        addNum: 'increment' // this.incrementN() を this.$store.dispatch('incrementN') にマップします
      })
    }
  }
</スクリプト>
<スタイル>
</スタイル>

同様に、ストア内のメソッドにエイリアスを付け、パラメータを渡す必要がある場合は、エイリアスを介してアクションまたはミューテーションに渡します。たとえば、「addNum({res: parseInt(paramValue)})」はオブジェクト {res: ''} を送信します。

まとめ

補助関数自体には新しい意味はなく、主に State、Getter、Mutations、Actions を使用する際のコードを簡素化するために使用されます。

上記は、Vue フロントエンド開発における補助機能の状態管理の詳細な例です。Vue 補助機能の状態管理の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue3 で状態管理を実装するために provide を使用する方法
  • vuexプロジェクトにおけるログインステータス管理の実践プロセス
  • Vue3.0 で Vuex 状態管理を開始する方法をすぐに習得します
  • Vueのシンプルな状態管理ストアモードを理解する方法
  • vuex での mapState の考え方の応用
  • Vueプロジェクトでvuexを使用する方法
  • vuex名前空間の使用
  • Vue の状態管理: Vuex の代わりに Pinia を使用する

<<:  Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)

>>:  MySQLリモート接続を有効にする方法

推薦する

jsはクリックしてカードを切り替える機能を実現します

この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有してい...

Linux環境でグラフデータベースneo4jを構築する方法の説明

Neo4j (Nosql の 1 つ) は、高性能なグラフ データベース (分散をサポートしていませ...

Linux で指定された期間に数分ごとにタスク スケジュール crontab を自動的に実行する方法

まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...

Win10 に Linux ubuntu-18.04 デュアル システムをインストールする (インストール ガイド)

コンピューターに Linux Ubuntu システムをインストールしました。初めてインストールしまし...

Linux でハイパースレッディング技術を動的に有効/無効にする方法の詳細な説明

序文Intel のハイパースレッディング テクノロジーにより、1 つの物理コア上で 2 つのスレッド...

HTML入門チュートリアル HTMLタグ記号をすぐにマスター

補足<br />HTML について何も知らず、HTML の始め方がまだわからない場合は、...

Dockerは指定されたメモリで操作を実行します

次のように: -m, --memory メモリ制限。形式は数値と単位です。単位は b、k、m、g の...

Linux で unzip コマンドを使用して複数のファイルを解凍する方法

Linuxにunzipコマンドがない問題の解決策unzipコマンドを使用して.zipファイルを解凍す...

MySQL で複数の主キーが定義されているエラーの解決方法

主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成( フィールド名タイプ、 フ...

Docker でローカルにイメージをインポート/保存/読み込み/削除する方法

1. Dockerはローカルイメージをインポートする場合によっては、イメージをローカルまたは別の友人...

vue-admin-template 動的ルーティング実装例

ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...

JS がビデオ弾幕効果を実現

これを実現するには、ES6 モジュール開発とオブザーバー モードを使用します。オブザーバー パターン...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

MySQL InnoDBエンジンのインデックスとストレージ構造の詳細な説明

序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...

MySQL 無料インストール版 (zip) のインストールと設定の詳細なチュートリアル

この記事では、MySQL無料インストール版(zip)のインストールと設定のチュートリアルを参考までに...