A quoi sert store in vue ?

Dans Vue, le magasin est utilisé pour gérer l'état, partager des données et gérer l'état externe entre divers composants. Le magasin est le cœur de l'application vuex, qui est un conteneur qui contient la plupart de l'état de l'application et modifie le. état dans le magasin. Le seul moyen est de soumettre une mutation.

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

À quoi sert store in vue ?

Vuex est un modèle de gestion d'état spécialement développé pour les applications Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application et utilise les règles correspondantes pour garantir que l'état change de manière prévisible.

Le cœur de chaque application Vuex est le magasin (entrepôt). Un « magasin » est essentiellement un conteneur qui contient la majeure partie de l’état de votre application. Il existe deux différences entre Vuex et les objets globaux simples :

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.

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.

Le concept de base de store

state représente l'état dans le magasin, similaire à l'attribut data dans l'instance vue.

Mutation

La seule façon de changer l'état dans la boutique Vuex est de soumettre une mutation.

Les mutations dans Vuex sont très similaires aux événements : chaque mutation a un type d'événement de chaîne (type) et une fonction de rappel (gestionnaire). Cette fonction de rappel est l'endroit où nous effectuons réellement des changements d'état, et elle acceptera l'état comme premier paramètre

Action

Action est similaire à la mutation, sauf que

Action soumet une mutation au lieu de changer directement l'état.

Action peut contenir n’importe quelle opération asynchrone.

Un exemple

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

utilisation de store

Avant d'utiliser store, vous devez d'abord installer vuex:

npm install vuex

Après avoir installé Vuex, créons un magasin. La création est simple : il suffit de fournir un objet d'état initial et quelques mutations.

Créez un nouveau dossier de magasin, puis créez un nouveau fichier index.js :

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++;
        }
    }
})

Pour accéder à la propriété this.$store dans le composant Vue, vous devez fournir le magasin créé pour l'instance Vue. Vuex fournit un mécanisme pour « injecter » le magasin du composant racine vers tous les sous-composants sous la forme d'options de magasin.

C'est-à-dire, importez-le dans le fichier main.js et enregistrez-le dans l'instance racine de vue :

import store from './store'
...
new Vue({
    el: "#app",
    store: store,
...

Ensuite, vous pouvez l'appeler via store.commit('increment') sous l'attribut de méthode méthodes de n'importe quel composant vue :

        ...
        methods:{
            increment:function(){
                this.$store.commit("increment");
                console.log(this.$store.state.count);
            },
            ...

L'effet est le suivant :

[Recommandation associée : "Tutoriel vue.js"]

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!