マップ状態コンポーネントが複数の状態を取得する必要がある場合、これらすべての状態を計算プロパティとして宣言すると、多少の繰り返しと冗長性が生じます。この問題を解決するには、計算されたプロパティを生成する 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 コンポーネントで使用され、残りのコードを変更する必要はありません。 <テンプレート> <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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)
この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有してい...
Neo4j (Nosql の 1 つ) は、高性能なグラフ データベース (分散をサポートしていませ...
まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...
コンピューターに Linux Ubuntu システムをインストールしました。初めてインストールしまし...
序文Intel のハイパースレッディング テクノロジーにより、1 つの物理コア上で 2 つのスレッド...
補足<br />HTML について何も知らず、HTML の始め方がまだわからない場合は、...
次のように: -m, --memory メモリ制限。形式は数値と単位です。単位は b、k、m、g の...
Linuxにunzipコマンドがない問題の解決策unzipコマンドを使用して.zipファイルを解凍す...
主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成( フィールド名タイプ、 フ...
1. Dockerはローカルイメージをインポートする場合によっては、イメージをローカルまたは別の友人...
ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...
これを実現するには、ES6 モジュール開発とオブザーバー モードを使用します。オブザーバー パターン...
この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...
序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...
この記事では、MySQL無料インストール版(zip)のインストールと設定のチュートリアルを参考までに...