web-dev-qa-db-fra.com

Vuex: sauter l'action et valider la mutation directement à partir du composant

Dans l'application vue.js, en utilisant vuex comme magasin de gestion d'état, je dois simplement changer la valeur d'une propriété dans vuex. Pour cela, je peux suivre deux méthodes:

  1. Distribuez une méthode action, qui validera davantage mutation, ce qui changera éventuellement l'état.

  2. La deuxième méthode consiste à valider le mutation directement à partir du composant et la méthode de mutation changera alors l'état.

Actuellement, j'utilise la première méthode comme celle-ci:

Dans le composant:

this.$store.dispatch('updateNotice', 'This is some notice')

En actions:

updateNotice ({state, getters, commit}, payload) { commit('UPDATE_NOTICE', payload) }

Dans les mutations:

UPDATE_NOTICE (state, payload) { state.notice = payload }

Comme vous l'avez peut-être remarqué, j'utilise la méthode action simplement pour valider une mutation unique , sans aucune autre logique ou fonctionnalité asynchrone .

Ma question est, dans ce cas, ne dois-je pas directement commettre la mutation du composant lui-même? Quelle est la meilleure pratique? Étant donné que l'utilisation de la méthode action dans ce cas simple semble verbeuse et ne sert à rien.

Y a-t-il une raison pour laquelle je devrais toujours commit actions à partir d'un composant? Après tout, dans vuex, la ...mapMutations() a une raison d'exister.

javascriptvue.jsvuejs2vue-componentvuex
18
Faisal Khurshid

Dans votre cas, il devrait être correct de valider les mutations directement dans vos composants à l'aide de ...mapMutations ou $store exemple.

Puisque vous avez demandé la meilleure pratique, la principale raison de l'existence d'actions est l'asynchronicité. Les mutations ne peuvent pas être asynchrones, contrairement aux actions, tandis que vous pouvez appeler $store.commit directement dans un composant, ce sera un événement synchrone, mais lorsque vous appelez dispatch, la validation peut être gérée de manière asynchrone dans le bloc d'action, contrairement aux mutations.

Par conséquent, la meilleure pratique consiste à utiliser Actions pour valider les modifications de votre état lorsqu'il doit être géré de manière asynchrone, par exemple, vous devez effectuer un appel d'API avant de valider le changement d'état dans de tels cas, ce serait une bonne idée d'utiliser Actions.

18
Vishnu Nair