mapState mapActions mapMutations mapGettersモジュールのvuexは、詳細なモジュールを使用しています

https://www.daozhao.com/8326.html

私たちは、主に、簡潔に自身のコードを使用し
、これらの方法は役に立たない前に、当社のコードは（例えば、PIMのためのモジュールは、ここで、簡単にモジュールを使用しないためのサブモジュールを使用して、ここで）このように見えるかもしれませんが、突然変異とアクション別の使用は、サブ例と一致しません。

export default {
    computed: {
        count(){
            return this.$store.state.pim.count;
        },
        newCount(){
            return this.$store.getters['pim/newCount'];
        }
    },
    methods: {
        getList(params){
            return this.$store.dispatch('pim/getList', params);
        }
    }
}

コードがはるかに簡単になりますmapState mapActions mapMutations mapGettersを使用します

import {mapState, mapActions, mapMutations, mapGetters}
export default {
    computed: {
        ...mapState('pim', {
            count: state => state.count
        }),
        ...mapGetters('pim', ['newCount'],
    },
    methods: {
        ...mapActions('pim', ['getList']),
    }
}

それより簡潔ではありません
が、そこの問題です
mapStateは、我々はこの数以下の現在のカウントPIMの状態マップ内にあることを確認することは容易で参照するには、私たちはCOUNT2にマップすることができます。しかし、直接行う方法mapGetters、mapActions、mapMutations []のようにクールです、ハハ。
しかし、私の現在の名前のPIM VUEでの店内は、その中のインスタンスを繰り返した場合は？例えば、私はGETLIST内部のアクションにしたいまたGETLIST呼ばれるのではなく、fetchListメソッド内VUEインスタンスにそれをマッピングし
mapActions公式サイトのためにそう言っています。

...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
])

若しくは

...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
])

一般的な使用では十分ですが、私たちのために助けにはならなかった上記の重複した名前の問題を解決します。。。
多くのオンラインプレゼンテーションmapState mapActions mapMutations mapGetters記事では、意図的にまたは意図せずに言いませんでした。
我々は唯一のmapActionsにこれらのメソッドを参照してくださいvuex内部のソースコードを見ることができますパラメータの引き渡しを解決する方法です。

var mapActions = normalizeNamespace(function (namespace, actions) {
  var res = {};
  normalizeMap(actions).forEach(function (ref) {
    var key = ref.key;
    var val = ref.val;

    res[key] = function mappedAction () {
      var args = [], len = arguments.length;
      while ( len-- ) args[ len ] = arguments[ len ];

      var dispatch = this.$store.dispatch;
      if (namespace) {
        var module = getModuleByNamespace(this.$store, 'mapActions', namespace);
        if (!module) {
          return
        }
        dispatch = module.context.dispatch;
      }
      return typeof val === 'function'
        ? val.apply(this, [dispatch].concat(args))
        : dispatch.apply(this.$store, [val].concat(args))
    };
  });
  return res
});

mapActionsに（mapState mapMutations mapGetters類似）normalizeMap最初と呼ばれるメソッドを呼び出します。
私たちは、その後、方法を見てnormalizeMap

function normalizeMap (map) {
  return Array.isArray(map)
    ? map.map(function (key) { return ({ key: key, val: key }); })
    : Object.keys(map).map(function (key) { return ({ key: key, val: map[key] }); })
}

それは我々が第二引数を渡す方法でいることが判明し['getList']、normalizeMap基準に充填に変換される{key: 'getList', val: 'getList'}配列、我々は、配列が渡されない場合、それは見ることができnormalizeMap、依然としてに、対象となる基準にオブジェクトを処理します{key: xxx, val: ***}フォームが最終的に配列を返したので、私たちは、上記の問題を解決したいmapActionsライン上のオブジェクトに渡された二番目のパラメータ、我々は離れて成功から非常に近い持っており、今の小さな問題があり、このオブジェクトのキーは、GETLISTまたはfetchListですそれは？？？
これは、我々は、キーまたはValの最終的な実装を見て、mapActionsソースコードに戻るために持っているものでしょうか？

return typeof val === 'function'
        ? val.apply(this, [dispatch].concat(args))
        : dispatch.apply(this.$store, [val].concat(args))

アクションの実際の実装は、ヴァルに基づいて、そうしている我々は、質問の答えを持っています

methods: {
        ...mapActions('pim', {
            fetchList: 'getList'
        }),
}

だから我々はGETLISTマッピング内のアクションを移動するための方法fetchList内部VUEインスタンスになっ置きます。
慎重な靴が見つかるはずtypeof val === 'function'我々はこれを使用することができますので、

methods: {
        ...mapActions('pim', {
            fetchList(dispatch, params){
                dispatch('getList', params);
            }
        }),
}

これはまた、マッピングのGETLIST方法がfetchListになっています。
私は便利になりたい、これはそれのより占いであるべきと考えています。