web-dev-qa-db-ja.com

paramsをmapGettersに渡す

コンポーネントでvuexおよびmapGettersヘルパーを使用します。私はこの機能を得ました：

getProductGroup(productIndex) {
  return this.$store.getters['products/findProductGroup'](productIndex)
}

これを何らかの方法でmapGettersに移動することはできますか？問題は、関数にも引数を渡すため、mapGettersにこれを配置する方法が見つからなかったことです。

vuejs2vuex
14
Victor

ゲッターが次のようなパラメーターを受け取る場合：

getters: {
  foo(state) {
    return (bar) => {
      return bar;
    }
  }
}

次に、ゲッターを直接マップできます。

computed: {
  ...mapGetters(['foo'])
}

そして、パラメータをthis.fooに渡すだけです：

mounted() {
  console.log(this.foo('hello')); // logs "hello"
}
26
thanksd

申し訳ありませんが、これについては@Golinmarqと一緒です。

テンプレートで計算されたプロパティを実行する必要がない、これに対する解決策を探している人には、すぐにそれを取得することはありません。

https://github.com/vuejs/vuex/blob/dev/src/helpers.js#L64

これは、mappedGettersを追加の引数でカリー化するために使用した小さなスニペットです。これは、ゲッターが追加の引数を取る関数を返すことを前提としていますが、ゲッターが状態と追加の引数の両方を取るように非常に簡単に改造できます。

    import Vue from "vue";
    import Vuex, { mapGetters } from "vuex";

    Vue.use(Vuex);

    const store = new Vuex.Store({
        modules: {
            myModule: {
                state: {
                    items: [],
                },
                actions: {
                    getItem: state => index => state.items[index]
                }
            },
        }
    });


    const curryMapGetters = args => (namespace, getters) =>
        Object.entries(mapGetters(namespace, getters)).reduce(
            (acc, [getter, fn]) => ({
            ...acc,
            [getter]: state =>
                fn.call(state)(...(Array.isArray(args) ? args : [args]))
            }),
            {}
        );

    export default {
        store,
        name: 'example',
        computed: {
            ...curryMapGetters(0)('myModule', ["getItem"])
        }
    };

要点はこちら https://Gist.github.com/stwilz/8bcba580cc5b927d7993cddb5dfb4cb1

1
stwilz