Explication détaillée de la façon d'implémenter vuex (tutoriel détaillé)

Cet article présente principalement comment implémenter une vuex simple. Maintenant, je le partage avec vous et vous donne une référence.

Nous devons d’abord savoir pourquoi nous utilisons vuex. La communication entre les composants parents et enfants peut être effectuée à l'aide d'accessoires et d'événements personnalisés, et une simple communication entre composants non parents et enfants utilise le bus (une instance Vue vide). Utilisez ensuite vuex pour résoudre une communication complexe entre composants non parent-enfant.

Peu importe si vous savez simplement comment utiliser vuex. Tout le monde peut lire la documentation et taper le code. Vous ne voulez pas savoir comment vuex est implémenté ? !

Laissant de côté le code source de vuex, réfléchissons d'abord à comment implémenter un simple "vuex". Est-ce simple ? Je ne veux pas de getters, de mutations, d'actions, etc., je veux juste un état.

Communication composante non parent-enfant

Avant la mise en œuvre, il faut revoir la mise en œuvre du bus, en empruntant l'exemple du site officiel :

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

Reasonance À cette époque, je ne savais pas où mettre le bus instancié, je n'avais donc pas d'autre choix que de le mettre sous la fenêtre et j'ai continué à utiliser window.bus. Même si c’est bien, cela affecte toujours la portée mondiale.

Tout à coup, un jour, j'ai découvert que je pouvais le monter sous l'instance racine de vue (dites adieu à window.bus à partir de maintenant), j'ai donc eu :

var app = new Vue({
 el: '#app',
 bus: bus
})

// 使用 bus
app.$options.bus

// or
this.$root.$options.bus

Puis j'ai découvert, bus En fait, il n'y a pas que l'événement on qui peut communiquer. En fait, bus est une instance Vue, où les données sont réactives. Par exemple, il existe deux composants non parent-enfant sous l'instance racine de l'application, qui utilisent tous deux des données de bus, ils répondent donc de manière synchrone.

var bus = new Vue({
 data: {
  count: 0
 }
})

Ci-dessus, le sous-composant a modifie le nombre. Si le sous-composant b utilise le nombre, alors il peut répondre à la dernière valeur du nombre.

Après tant de discussions, vous ne l’avez pas encore découvert ? Ne s'agit-il pas simplement de réaliser la communication entre les non-composants, l'état de vuex ? !

Encapsuler le bus

Oui, encapsulez le bus tout à l'heure C'est le "vuex" le plus simple (uniquement avec la fonction d'état). Tout d’abord, nous aurons une application d’instance racine avec deux composants non parent-enfant childA et childB .

L'implémentation du code html est la suivante :

<p id="app">
 <child-a></child-a>
 <child-b></child-b>
</p>

Implémentation des composants non parent-enfant

Ensuite il y a deux composants non -Composants parent-enfant et implémentation de l'application, Les sous-composants utilisent tous le nombre de bus, qui est représenté ici par store.state, ce qui est cohérent avec vuex :

// 待实现
const store = new Store(Vue, {
 state: {
  count: 0
 }
})

// 子组件 a
const childA = {
 template: &#39;<button @click="handleClick">click me</button>&#39;,
 methods: {
  handleClick () {
   this.$store.state.count += 1
  }
 }
}

// 子组件 b
const childB = {
 template: &#39;<p>count: {{ count }}</p>&#39;,
 computed: {
  count () {
   return this.$store.state.count
  }
 }
}

new Vue({
 el: &#39;#app&#39;,
 components: {
  &#39;child-a&#39;: childA,
  &#39;child-b&#39;: childB
 },
 store: store
})

Voir cela là est un Store à implémenter dans le code. Les paramètres requis, car je suis trop paresseux pour utiliser Vue.use() ici, donc je passe directement Vue comme paramètre à utiliser, puis le deuxième paramètre est cohérent avec le paramètre que nous avons passé en utilisant vuex.

Implémentation de Store

La prochaine étape est la mise en œuvre de Store, une implémentation en deux étapes :

1. Créer un instance de bus ;

2. Autoriser tous les sous-composants à accéder à ce.$store.

La première étape est déjà mentionnée ci-dessus. La deuxième étape utilise principalement Vue.mixin pour le mixage global, mais elle trouve simplement l'instance racine avec le magasin et attribue le magasin sur le prototype Vue. . Il permet également de mélanger l'application de l'instance racine sans écrire spécifiquement des mixins. Le Store implémenté par

class Store {
 constructor (Vue, options) {
  var bus = new Vue({
   data: {
    state: options.state
   }
  })

  this.install(Vue, bus)
 }
 
 install (Vue, bus) {
  Vue.mixin({
   beforeCreate () {
    if (this.$options.store) {
     Vue.prototype.$store = bus
    }
   }
  })
 }
}

est un simple "vuex", qui a l'état de vuex, ce qui est suffisant pour permettre une communication simple entre les composants non parents et enfants.

Créez une instance de bus dans le constructeur de Store et injectez-la dans le prototype de Vue, afin que tous les composants puissent accéder à ce.$store, qui est l'instance de bus. this.$store est une instance de Vue, donc l'accès à this.$store.state.count accède réellement aux données, réalisant ainsi la synchronisation des réponses entre les composants non parents et enfants. Tout le code source est disponible ici.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Quelles sont les vulnérabilités de sécurité liées à l'utilisation de l'attaque temporelle dans les applications de nœuds ?

Implémentation d'un sens unique dans vue Objet de livraison de composants Reliure, comment faire ?

Comment utiliser TypeScript dans les composants Vue (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!