web-dev-qa-db-fra.com

vue js getter avec argument

Existe-t-il un moyen de passer un paramètre dans le getter de vuexstore? Quelque chose comme:

new Vuex.Store({
  getters: {
    someMethod(arg){
       // return data from store with query on args
    }
  }
})

Pour que dans le composant je puisse utiliser

<template>
    <div>
        <p>{{someMethod(this.id)}}</p>
    </div>
</template>
<script lang="ts">
    import { mapGetters } from "vuex"

    export default {
        props: ['id'],
        computed: mapGetters(['someMethod'])
        }
    }
</script>

mais dans vuex le premier argument est state et le second est autre getters. C'est possible?

javascriptvue.jsvuejs2vuex
22
Sly

Une façon de procéder peut être:

new Vuex.Store({
  getters: {
    someMethod(state){
      var self = this;
       return function (args) {
          // return data from store with query on args and self as this
       };       
    }
  }
})

Cependant, getter ne prend pas d'arguments et pourquoi est expliqué dans ce thread :

la convention de dénomination est légèrement déroutante, getters indique que l'état peut être récupéré sous n'importe quelle forme, mais en fait ce sont des réducteurs.

Peut-être devrions-nous avoir des réducteurs étant des méthodes pures. Qui peut être utilisé pour le filtrage, la cartographie, etc.

les getters peuvent alors recevoir n'importe quel contexte. Semblable à calculé, mais vous pouvez maintenant combiner les accessoires calculés aux options getters dans vuex. Ce qui aide à structurer les composants.

Modifier:

Une meilleure façon d'atteindre la même chose sera d'utiliser la flèche ES6 comme détaillé dans la réponse de nivram8 , en utilisant getters de style de méthode où vous pouvez passer un paramètre en retournant une fonction former le getter:

new Vuex.Store({
  getters: {
    someMethod: (state) => (id) => {
        return state.things.find(thing => thing.id === id)
      }
    };       
  }
})
27
Saurabh

Une fonction de flèche ES6 fonctionnerait bien ici aussi. Par exemple, disons que vous recherchez une "chose" particulière dans votre magasin.

new Vuex.Store({
  getters: {
    someMethod: (state) => (id) => {
        return state.things.find(thing => thing.id === id)
      }
    };       
  }
})

Voici un autre exemple via la documentation Vuex

20
nivram80