web-dev-qa-db-fra.com

Passer les paramètres à la carte

J'utilise vuex et mapGetters helper dans mon composant. J'ai obtenu cette fonction:

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

Est-il possible de déplacer cela d'une manière ou d'une autre vers mapGetters? Le problème est que je passe également un argument à la fonction, donc je n'ai pas trouvé de moyen de le mettre dans mapGetters

vuejs2vuex
14
Victor

Si votre getter accepte un paramètre comme celui-ci:

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

Ensuite, vous pouvez directement mapper le getter:

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

Et passez simplement le paramètre à this.foo:

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

Désolé, je suis avec @Golinmarq sur celui-ci.

Pour ceux qui recherchent une solution à cela où vous n'avez pas besoin d'exécuter vos propriétés calculées dans votre modèle, vous ne le sortirez pas de la boîte.

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

Voici un petit extrait que j'ai utilisé pour curry le mappedGetters avec des arguments supplémentaires. Cela suppose que votre getter retourne une fonction qui prend vos arguments supplémentaires, mais vous pouvez facilement la mettre à niveau pour que le getter prenne à la fois l'état et les arguments supplémentaires.

    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"])
        }
    };

Gist est ici https://Gist.github.com/stwilz/8bcba580cc5b927d7993cddb5dfb4cb1

1
stwilz