web-dev-qa-db-fra.com

à quoi sert vuex-router-sync?

Pour autant que je sache vuex-router-sync sert uniquement à synchroniser le route avec le vuex store et le développeur peut accéder au route comme suit:

store.state.route.path
store.state.route.params

Cependant, je peux également gérer route par this.$route qui est plus concis.

Quand dois-je utiliser l'itinéraire dans le magasin et dans quel scénario ai-je besoin de vuex-router-sync?

vuejs2vue-router
24
Guihai

J'ai vu ce fil lorsque j'apprenais Vue. Ajout d'une partie de ma compréhension de la question.

Vuex définit un modèle de gestion d'état pour les applications Vue. Au lieu de définir les accessoires des composants et de passer l'état partagé via les accessoires à tous les endroits, nous utilisons un magasin centralisé pour organiser l'état partagé par plusieurs composants. La restriction de la mutation d'état rend la transition d'état plus claire et plus facile à raisonner.

Idéalement, nous devrions obtenir/construire des vues cohérentes (ou identiques) si les états de magasin fournis sont les mêmes. Cependant, le routeur, partagé par plusieurs composants, rompt cela. Si nous devons expliquer pourquoi la page est rendue telle qu'elle est, nous devons vérifier l'état du magasin ainsi que l'état du routeur si nous dérivons la vue à partir de this.$router Propriétés.

vuex-router-sync est un assistant pour synchroniser l'état du routeur avec le magasin d'état centralisé. Maintenant, toutes les vues peuvent être créées à partir du magasin d'état et nous n'avons pas besoin de vérifier this.$router.

Notez que l'état route est immuable, et nous devons "changer" son état via le $router.Push ou $router.go appel. Il peut être utile de définir certaines actions en magasin comme:

// import your router definition
import router from './router'

export default new Vuex.Store({
  //...
  actions: {
    //...
    // actions to update route asynchronously
    routerPush (_, arg) {
      router.Push(arg)
    },
    routerGo (_, arg) {
      router.go(arg)
    }
  }
})

Cela enveloppe les mises à jour route dans les actions du magasin et nous pouvons complètement nous débarrasser des this.$router dépendances dans les composants.

4
Arie Xiao