Vuex でのマッピングの完全ガイド

Vuex は両刃の剣です。正しく使用すれば、Vue を使用すると作業が容易になります。注意しないとコードが乱雑になる可能性もあります。

Vuex を使用する前に、まず状態、ゲッター、ミューテーション、アクションという 4 つの主要な概念を理解する必要があります。単純な Vuex 状態は、ストア内のこれらの概念内でデータを操作します。 Vuex のマップは、マップからデータを取得するための優れた方法を提供します。

この記事では、Vuex ストレージでデータをマッピングする方法を説明します。 Vuex の基本に精通している場合は、このコンテンツは、よりクリーンで保守しやすいコードを作成するのに役立ちます。

この記事は、Vue.js と Vuex の基本を理解していることを前提としています。

Vuex のマッピングとは何ですか?

Vuex のマッピングを使用すると、状態内のあらゆる種類のプロパティ (状態、ゲッター、ミューテーション、アクション) をコンポーネント内の計算されたプロパティにバインドし、状態内のデータを直接使用できます。

以下は、テスト データが state に配置されている単純な Vuex ストアの例です。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: "test data"
  }
})

state から data の値にアクセスする場合は、Vue.js コンポーネントで次の操作を実行できます。

computed: {
        getData(){
          return this.$store.state.data
        }
    }

上記のコードは機能しますが、状態データの量が増え始めると、すぐに見苦しくなります。

例:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: {
        id:1,
        age:23,
        role:user
        data:{
          name:"user name",
          address:"user address"
        }
    },
    services: {},
    medical_requests: {},
    appointments: {},
    }
  }
})

状態のユーザー オブジェクトからユーザー名を取得するには:

computed: {
        getUserName(){
          return this.$store.state.user.data.name
        }
    }

これで仕事は完了ですが、もっと良い方法があります。

状態のマッピング

状態を Vue.js コンポーネントの計算されたプロパティにマッピングするには、次のコマンドを実行します。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
        ])
    }
}

これで、コンポーネント内のユーザー オブジェクト全体にアクセスできるようになります。

状態から mapState メソッドにオブジェクトを追加するなど、さらに多くのことを行うことができます。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
            'services'
        ])
    }
}

ご覧のとおり、これははるかにクリーンです。ユーザー名には、次の方法で簡単にアクセスできます。

{{user.data.name}}

services オブジェクトとマップの他の多くの値にも同じことが当てはまります。

配列を mapState() に渡す方法に気づきましたか?値に別の名前を付ける必要がある場合は、オブジェクトを渡すことができます。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState({
            userDetails:'user',
            userServices:'services'
        })
    }
}

は、userDetails を呼び出すだけで参照できるようになりました。 状態全体をマップする場合

経験則として、状態に大量のデータがあり、そのすべてがコンポーネントで必要な場合にのみマップする必要があります。

上記の例では、値が 1 つだけ必要な場合 (例:

username

)、ユーザー オブジェクト全体をマッピングすることはあまり意味がありません。 マッピング中に、オブジェクト全体がメモリにロードされます。実際には、不要なデータをメモリにロードし続けることは冗長になり、長期的にはパフォーマンスに影響を与えるため、望ましくありません。

マッピング ゲッター

マッピング ゲッターの構文は、

mapState

関数と似ています。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { mapGetters } from &amp;#39;vuex&amp;#39; export default { computed: { ...mapGetters([ &amp;#39;firstCount&amp;#39;, &amp;#39;anotherGetter&amp;#39;, ]) } }</pre><div class="contentsignin">ログイン後にコピー</div></div>別の名前を使用する場合は、マッピング状態と同様に、オブジェクトを

mapGetters

関数に渡すことができます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { mapGetters } from &amp;#39;vuex&amp;#39; export default { computed: { ...mapGetters([ first:&amp;#39;firstCount&amp;#39;, another:&amp;#39;anotherGetter&amp;#39;, ]) } }</pre><div class="contentsignin">ログイン後にコピー</div></div>変異のマッピング

変異をマッピングする場合、次の構文を使用して変異を送信できます。

this.$store.commit('mutationName`)

例:

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`

      // `mapMutations` 也支持 payloads:
      'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`
    ]),
    ...mapMutations({
      find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`
    })
  }
}

マッピング アクション

マッピング アクションは、メソッド内でも実行できるという点で、マッピングの突然変異とよく似ています。マッパーを使用すると、

this.$store.dispatch('actionName')

がマッパー配列内のオブジェクトの名前またはキーにバインドされます。

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`

      // `mapActions` 也支持 payloads:
      'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
    })
  }
}

概要

これを見れば、次のことがわかるはずです:

Vuex のマッピングがどのように機能するのか、そしてなぜマッピングを使用する必要があるのか深い理解

• #Vuex ストア内のすべてのコンポーネント (状態、ゲッター、ミューテーション、アクション) をマッピングできるようにする

#ストアをいつマッピングする必要があるかを理解する

• 英語の元のアドレス: https://blog.logrocket.com/a-complete-guide-to-mapping-in-vuex/

著者: Moses Aumadu

関連する推奨事項:

2020 フロントエンド Vue インタビューの質問の概要 (回答付き)

Vue チュートリアルの推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、プログラミング入門

をご覧ください。 ！

以上がVuex でのマッピングの完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。