Explication détaillée des étapes pour démarrer avec vuex

Cette fois, je vais vous apporter une explication détaillée des étapes pour démarrer avec vuex Quelles sont les précautions pour démarrer avec vuex Voici des cas pratiques, jetons un oeil.

Avant-propos

Dans les projets précédents, nous avons plus ou moins rencontré certains endroits où la communication entre les composants est requise, mais pour diverses raisons,
Le coût du bus événementiel est plus élevé que celui de vuex, j'ai donc choisi vuex 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 ? Vraiment ? Est-ce 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 aura forcément des inexactitudes. , corrigez-moi s'il vous plaît !

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éez un nouveau projet vue, 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. Le nom peut être placé n'importe où, il est recommandé de le placer dans le répertoire /src/store (sinon, 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'
 }
 }
})

Vue du code Cela semble un peu différent, mais cela vous semble-t-il familier? Ce n'est pas très différent de 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

Introduisez le fichier ci-dessus dans le fichier d'entrée, et modifiez légèrement les paramètres passés à new Vue(), après la nouvelle ligne Il y a des notes

Emplacement du fichier/src/main.js (entrée générée automatiquement par vue-cli, si vous pouvez vous passer d'échafaudages, 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: '<App/>'
})

Conseil : L'adresse après l'importation du magasin depuis './store' est l'emplacement du fichier que nous avons créé ci-dessus (/src/store/index.js).
Parce qu'il s'agit d'index.js, il peut ê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 l'emplacement du fichier

/src/main.js (il s'agit également d'un app.vue généré par vue-cli. Pour plus de commodité. de démonstration, j'ai supprimé le code redondant)

<template>
 <p>
 {{getName}}
 <button @click="changeName" value="更名">更名</button>
 </p>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit('updateName')
 }
 }
}
</script>

C'est un fichier vue très ordinaire, il y a des différences Le fait est qu'ici nous devons utiliser l'attribut calculé pour obtenir les "données" dans le store

De plus, si nous voulons modifier les données, nous n'utilisons plus this.xxx = xxx et les changeons en this.$store.commit(' updateName')

Résumé

Vous vous demandez peut-être quel est l'intérêt 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 ? utilisez vuex, donc certains processus sont simplifiés. Imaginez simplement si vous avez une page comme celle-ci :

Il y a 10 couches de composants imbriquées au total (c'est-à-dire qu'il y a des sous-sous-composants à l'intérieur des sous-composants), là sont des sous-sous-sous-composants sous sous-sous-composants, et ainsi de suite pendant 10 niveaux)

Ensuite si une donnée du composant de dernière couche change, lorsque l'on veut notifier le composant de première couche, il suffit de In this.$store.commit(),

puis d'utiliser l'attribut calculé sur le composant le plus externe pour obtenir la valeur correspondante, vous pouvez la mettre à jour en temps réel, il n'est pas nécessaire d'y aller. jusqu'à $emit couche par couche.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser v-model et promettre d'implémenter le composant pop-up vue

Comment pour utiliser le plug-in axios d'encapsulation secondaire Vue

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!