Gestion des statuts

Répertoire

• Mise en œuvre officielle de la gestion de l'état de type Flux

  • Développeurs React, veuillez vous référer aux informations suivantes

• Démarrez avec une gestion simple du statut

Mise en œuvre officielle de la gestion de l'état de type Flux

Étant donné que l'état est dispersé et distribué entre de nombreux composants et interactions entre les composants, la complexité des grandes applications augmente souvent progressivement. Pour résoudre ce problème, Vue propose vuex : notre bibliothèque de gestion d'état inspirée d'Elm. vuex est même intégré à vue-devtools, permettant le débogage de voyage dans le temps sans aucune configuration.

Développeurs React, veuillez vous référer aux informations suivantes

Si vous êtes un développeur de React, vous pourriez être préoccupé par les différences entre Vuex et Redux, Redux fait partie de l'écosystème React L’implémentation Flux la plus populaire. Redux n'est pas réellement compatible avec les couches de vue, il peut donc être facilement utilisé avec Vue via certaines Simple Bindings. La différence avec Vuex est qu'il est conçu spécifiquement pour les applications Vue. Cela lui permet de mieux s'intégrer à Vue, tout en fournissant une API concise et une expérience de développement améliorée.

Premiers pas avec la gestion simple des états

Ce qui est souvent négligé est la source réelle des objets data bruts dans une application Vue - lors de l'accès à un objet de données, un L'instance Vue n'est qu'un simple accès proxy. Ainsi, si vous avez un état qui doit être partagé entre plusieurs instances, vous pouvez le partager simplement en conservant une copie des données : 数据对象的实际来源 - 当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享：

const sourceOfTruth = {}

const vmA = new Vue({
  data: sourceOfTruth
})

const vmB = new Vue({
  data: sourceOfTruth
})

现在当 sourceOfTruth 发生变化，vmA 和 vmB 都将自动的更新引用它们的视图。子组件们的每个实例也会通过 this.$root.$data

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

Maintenant, lorsque sourceOfTruth change, vmA< /code> et vmB mettront automatiquement à jour les vues qui les référencent. Chaque instance des composants enfants est également accessible via this.$root.$data. Nous disposons désormais d’une source unique de données, mais le débogage devient un cauchemar. À tout moment, lorsque des données changent dans une partie de notre application, il n'y aura aucune trace du changement. Pour résoudre ce problème, nous adoptons un

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})