web-dev-qa-db-fra.com

est-ce une mauvaise pratique d'accéder directement aux propriétés d'état de vuex (sans les getters), et pourquoi?

Si voici mon fichier store.js:

const state = {
  count: 0,
  loggedIn: false
}

const mutations = {
  UP_COUNT(state) {
      state++;
  }
}

const actions = {
  upCount({ commit }) {
    commit('UP_COUNT');
  }
}


Disons que pour augmenter l'état count à partir d'un de mes composants Vue, je vais appeler une action qui commet ensuite une mutation:

this.$store.dispatch('upCount');


Alors disons dans un autre composant Vue, je veux utiliser le nombre d'états:

<div class="count">{{ this.$store.state.count }}</div>


Quel est le problème avec ce style? (par rapport à l'utilisation de $this.store.getters...)

javascriptvue.jsvuejs2getter-settervuex
11
tyler-g

Comme je l'ai souligné sur ce post il n'y a pas de moyen dur et rapide de faire les choses mais en suivant une pratique et en allant avec c'est mieux.

L'utilisation de getters peut sembler exagérée, mais vous pouvez modifier les données en arrière-plan à l'aide de getters tant que le nom du getter reste le même, ce qui évite beaucoup de travail de refactorisation et d'essayer de trouver toutes les références à d'autres endroits où vous pourriez a utilisé this.$store.state.module.someValue.

Il vous permet également de renvoyer des données basées sur plusieurs variables d'état dans un getter, c'est-à-dire

`isAllowed: 'getIsAllowed'`

pourrait être basé sur

getIsAllowed (state) {
  return state.loggedIn && state.hasPermission && state.somethingElse
}

Vous pouvez modifier facilement la base de isAllowed au lieu d'utiliser chaque variable d'état dans vos composants et de répéter la logique plusieurs fois.

9
webnoob