Comment utiliser vuex pour faire fonctionner des objets d'état

Cette fois, je vais vous montrer comment utiliser vuex pour faire fonctionner des objets d'état, et quelles sont les précautions à prendre pour utiliser vuex pour faire fonctionner des objets d'état. 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 comporte cinq concepts de base : état, getters, mutations, actions et modules.

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 => Vuex modulaire

É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.

Obtenir 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'opération vuex ci-dessous Le code d'instance de l'objet d'état

Chaque fois que store.state.count change, les propriétés calculées seront récupérées 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 obtenir ce global via this.$store.state.data attribut de nom.

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 :

Comment analyser les fichiers vue

Comment optimiser 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!