Explication détaillée de la méthode de vuex pour faire fonctionner les objets d'état

Cette fois, je vais vous apporter une explication détaillée de la méthode de fonctionnement des objets d'état dans vuex. Quelles sont les précautions lors de l'utilisation d'objets d'état dans vuex. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Qu'est-ce que Vuex ?

VueX est une architecture de gestion d'état spécialement conçue pour les applications Vue.js, qui gère et maintient uniformément l'état modifiable de chaque composant vue (vous pouvez le comprendre comme certaines données dans le composant vue).

Vue a cinq concepts de base, état, getters, mutations, actions, moduless.

Résumé

state => Données de base
getters => Données dérivées des données de base
mutations => Méthode pour soumettre les données modifiées, synchrone !
actions => Comme un décorateur, encapsulant les mutations pour les rendre asynchrones.
modules => ModularisationVuex

État

l'état est la donnée de base dans Vuex !

Arbre d'état unique

Vuex utilise un seul arbre d'état, c'est-à-dire qu'un objet contient toutes les données d'état. En tant qu'option du constructeur, state définit tous les paramètres d'état de base dont nous avons besoin.

Obtenez l'attribut Vuex dans le composant Vue

• Nous pouvons obtenir l'état de Vuex via Computed de Vue, comme suit :

const store = new Vuex.Store({
  state: {
    count:0
  }
})
const app = new Vue({
  //..
  store,
  computed: {
    count: function(){
      return this.$store.state.count
    }
  },
  //..
})

Regardons l'exemple de code de l'objet d'état de fonctionnement vuex

Chaque fois que store.state.count change, les attributs calculés seront recalculés et le DOM associé sera mis à jour.

Le cœur de chaque application Vuex est le magasin.

Citant deux phrases de la documentation officielle pour décrire vuex :

1 Le stockage d'état de Vuex est réactif. Lorsqu'un composant Vue lit l'état du magasin, si l'état dans le magasin change, le composant correspondant sera efficacement mis à jour en conséquence.

2. Vous ne pouvez pas modifier directement l'état dans le magasin. La seule façon de modifier l’état du magasin est de commettre explicitement une mutation. Cela nous permet de suivre facilement chaque changement d'état, ce qui nous permet de mettre en œuvre certains outils pour nous aider à mieux comprendre notre application.

Utilisez l'état dans vuex

1, introduisez store dans le composant racine, puis le sous-composant peut l'obtenir via this.$store.state.data name Propriétés mondiales maintenant.

Pour le projet que j'ai créé en utilisant vue-cli, App.vue est le composant racine

Le code d'App.vue

<template>
 <p id="app">
   <h1>{{$store.state.count}}</h1>  
  <router-view/>
 </p>
</template>
<script>
 import store from '@/vuex/store';
export default {
 name: 'App',
 store
}
</script>
<style>
</style>

est dans le dossier du composant Count .vue Code

<template>
 <p>
   <h3>{{this.$store.state.count}}</h3>
 </p>
</template>
<script> 
  export default {
    name:'count'，
  }
</script>
<style scoped>
</style>

code store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
 count: 1
}
export default new Vuex.Store({
 state，
})

2, obtenez l'attribut global via la fonction auxiliaire mapState

L'avantage de cette méthode est qu'elle peut être obtenu directement via le nom de l'attribut. Peut être utilisé pour obtenir les valeurs d'attribut.

Modifiez le code de Component.vue

<template>
 <p>
   <h3>{{this.$store.state.count}}--{{count}}</h3>
  <h4>{{index2}}</h4>
 </p>
</template>
<script> 
  import { mapState,mapMutations,mapGetters } from "vuex";
  export default {
    name:'count',
    data:function(){
      return {
        index:10
      }
    },
    //通过对象展开运算符vuex里的属性可以与组件局部属性混用。
    computed:{...mapState(['count']),
      index2() {
        return this.index+30;
      }  
    } ,
  }
</script>
<style scoped>
</style>

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 PHP chinois !

Lecture recommandée :

Quelles sont les différences entre l'utilisation de length et size() dans jQuery

Style chaîne dans le modèle de conception JS Appeler en utilisant l'analyse

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!