Une introduction à vuex

Permettez à tout le monde de démarrer rapidement avec VUEX en trois étapes simples. Cet article présente également les fonctions les plus élémentaires de VUEX et les points de connaissances associés. Si vous êtes intéressé, apprenez-le.

Avant-propos

Dans des projets précédents, nous avons plus ou moins rencontré des endroits où la communication entre les composants est requise, et pour diverses raisons,
Le coût du bus événementiel est plus élevé que celui de vuex, donc vuex a été choisi pour la sélection technique, mais je ne sais pas pourquoi,
Certains nouveaux arrivants dans l'équipe ont commencé à reculer lorsqu'ils ont entendu parler de vuex, car vuex est difficile ? Est-ce vraiment difficile ?
Aujourd'hui, nous utilisons 3 étapes simples pour prouver à quel point vuex est simple

C'est une expérience purement personnelle, et il y a inévitablement des inexactitudes, des corrections sont les bienvenues. !

Ceci est un tutoriel d'entrée de gamme, un tutoriel d'entrée de gamme, un tutoriel d'entrée de gamme pour les novices

Étape 0

Créer un nouveau projet vue et installez vuex. Je ne présenterai pas grand chose ici. Si vous pouvez cliquer, vous aurez ces compétences par défaut ^_^

La première étape

Créez un nouveau fichier .js avec n'importe quel nom et emplacement Comme d'habitude, il est recommandé de le placer dans le répertoire /src/store (si vous n'en avez pas, créez-en un vous-même)

Emplacement du fichier/src/store/index.js

// 引入vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 这里需要use一下,固定写法,记住即可
Vue.use(Vuex)

// 直接导出 一个 Store 的实例
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
 name: 'oldName'
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
 updateName (state) {
  state.name = 'newName'
 }
 }
})

Le code semble un peu plus grand, mais vous semble-t-il familier ? pas très différent de la vue ordinaire.

Cette étape consiste en fait à créer une nouvelle boutique, mais nous ne l'avons pas encore utilisée dans le projet.

La deuxième étape

Introduit dans le fichier d'entrée Le fichier ci-dessus, et modifie légèrement les paramètres passés à new Vue(), il y a des notes après les nouvelles lignes

Emplacement du fichier/src/ main.js (entrée générée automatiquement par vue-cli, si vous pouvez échafauder, alors je n'ai pas besoin de vous expliquer)

import Vue from 'vue'
import App from './App'
import vuexStore from './store' // 新增

new Vue({
 el: '#app',
 store:vuexStore     // 新增
 components: { App },
 template: &#39;<App/>&#39;
})

Astuce : importer un magasin depuis './store' L'adresse derrière est Ci-dessus, nous avons créé l'emplacement du fichier (/src/store/index.js),

car il s'agit de index.js, il peut donc être omis. 🎜>

La troisième étape

Les 2 étapes ci-dessus ont en fait terminé la configuration de base de vuex. L'étape suivante consiste à utiliser le <. 🎜> emplacement du fichier/src/main.js (également généré par vue-cli app.vue, pour faciliter la démonstration, j'ai supprimé le code redondant)

Il s'agit d'un fichier vue très ordinaire, il y a des différences Ici, nous devons utiliser l'attribut calculé pour obtenir les "données" dans le magasin

<template>
 <p>
 {{getName}}
 <button @click="changeName" value="更名">更名</button>
 </p>
</template>

<script>
import HelloWorld from &#39;./components/HelloWorld&#39;

export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit(&#39;updateName&#39;)
 }
 }
}
</script>

De plus, si nous voulons modifier les données, nous n'utilisez plus this.xxx = xxx et remplacez-le par this.$store.commit('updateName' )

Résumé

Vous pensez peut-être, qu'est-ce que est l'importance de faire cela dans l'exemple ci-dessus ? Pourquoi ne pas simplement utiliser les données et les méthodes de vue ?
L'exemple ci-dessus sert simplement à expliquer brièvement comment utiliser vuex, donc certains processus sont simplifiés si vous l'avez fait. une page comme celle-ci :

Un total de 10 couches de composants sont imbriquées (c'est-à-dire qu'il y a aussi 10 couches de composants dans le sous-composant) Il y a des sous-sous-composants, et là sont des sous-sous-composants sous sous-sous-composants, et ainsi de suite pour 10 niveaux)

Puis lorsque les données du dernier composant de couche changent, lorsque vous souhaitez notifier le premier composant de couche, Nous devons uniquement utiliser this.$store.commit(),

dans le composant inférieur, puis utiliser l'attribut calculé sur le composant le plus externe pour obtenir la valeur correspondante afin d'obtenir des mises à jour en temps réel. Non. des couches sont nécessaires Layer $emit up.

Enfin

Je voulais à l'origine développer getter, action+dispatch, modularité, etc. à la fin, mais pour être digne de ce titre.
Consolidation des points de connaissances avancés de VUEX

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au chinois PHP. site web!

Recommandations associées :

Introduction à l'utilisation de v-bind dans VUE

Comment unifier le style de codage de vue dans vscode Introduction

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!