web-dev-qa-db-fra.com

Vue.js [vuex] comment expédier d'une mutation?

J'ai une liste de filtres que je souhaite appliquer à un objet json.

Mes mutations ressemblent à ceci:

const mutations = {
    setStars(state, payload) {
        state.stars = payload;
        this.dispatch('filter');
    },

    setReviews(state, payload) {
        state.reviews = payload;
        this.dispatch('filter');
    }
};

En raison du fonctionnement des filtres, je dois les réappliquer tous à nouveau car je ne peux pas simplement continuer à filtrer une liste car cela me pose des problèmes lorsqu'un utilisateur désélectionne une option de filtre.

Ainsi, lorsqu'une mutation est effectuée vers un filtre d'étoiles ou un filtre d'avis (l'utilisateur filtre), je dois appeler une fonction qui exécute tous mes filtres.

Quelle est mon option la plus simple ici? Puis-je ajouter une sorte de fonction d'aide ou éventuellement mettre en place une action qui appelle des mutations qui filtrent réellement mes résultats?

javascriptvue.jsvuejs2vuex
19
Stephan-v

Les mutations ne peuvent pas envoyer d'autres actions, mais les actions peuvent envoyer d'autres actions. Ainsi, une option consiste à avoir une action valider la mutation puis déclencher l'action de filtrage.

Une autre option, si possible, serait que tous les filtres soient getters qui réagissent naturellement aux changements de données comme le ferait une propriété calculée.

Exemple d'actions appelant d'autres actions:

// store.js
export default {
  mutations: {
    setReviews(state, payload) {
      state.reviews = payload
    }
  }

  actions: {
    filter() {
      // ...
    }

    setReviews({ dispatch, commit }, payload) {
      commit('setReviews', payload)
      dispatch('filter');
    }
  }
}


// Component.vue
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['setReviews']),
    foo() {
      this.setReviews(...)
    }
  }
}
29
Matt