Vue.js Vuex

Vuex es una biblioteca de administración de estado para aplicaciones Vue. Sirve como una única fuente de verdad en toda la aplicación y centraliza el flujo de datos a varios componentes. Como sabemos, pasar accesorios puede ser tedioso para aplicaciones complejas con muchos componentes, Vuex hace que esta interacción sea muy fluida y escalable.

Requisito previo:

• Debe tener npm instalado en su sistema. Luego necesita instalar el vue-cli con este comando:

  npm install -g @vue/cli

• Luego crea un nuevo proyecto ‘gfg_vue2’ (o cualquier nombre de tu elección) usando:

  vue create gfg_vue2

Seleccione la configuración de instalación predeterminada.

Estructura del proyecto: Se verá así.

Agregar Vuex a su aplicación

• Para agregar Vuex al proyecto Vue.JS, puede hacerlo a través de enlaces CDN o preferiblemente agregarlo ejecutando lo siguiente en su terminal en el directorio de su proyecto:

  npm install vuex –save

• Y luego impórtelo en su archivo JS requerido usando

  import Vuex from 'vuex'

Vuex: Vuex tiene 3 partes fundamentales para su funcionamiento:

1. Estado: El objeto de estado en la tienda Vuex es donde se almacenan los datos de los componentes de nuestra aplicación. Se puede acceder a estos en componentes individuales importando la tienda Vuex y luego usando ‘store.state.storedVariable’ dentro de los métodos.
2. Mutaciones: se puede acceder a las variables de estado desde cualquier lugar, pero la única forma en que se pueden cambiar es mediante la confirmación de mutaciones. Las mutaciones tienen un tipo de string y un controlador, y los controladores se definen en el almacén donde realizamos modificaciones de estado reales.
3. Acciones: las acciones son similares a las mutaciones solo que realmente cometen las mutaciones. Esto puede parecer redundante ya que las mutaciones también podrían haber realizado esta tarea, pero hay una razón: las mutaciones son operaciones síncronas, ya que implican el cambio de variables de estado, mientras que las acciones pueden realizar operaciones asíncronas.

Sintaxis

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        // Define state variables as properties here
    },
    mutations: {
        // Mutation handlers (pass state object)
    },
    actions: {
        // Actions (pass context object)
    }
})

Ejemplo: Usaremos el mismo ejemplo que usamos en las explicaciones event-bus y $emit/props ( here ).

En el centro de cada aplicación de Vuex hay una tienda. Es el contenedor que contiene el estado de nuestra aplicación. Son reactivos y solo se pueden cambiar al cometer mutaciones, lo que evita que cualquier componente cambie de estado implícitamente.

import Vue from 'vue'
import Vuex from 'vuex'
  
Vue.use(Vuex)
  
export default new Vuex.Store({
    state: {
        n: 0
    },
    mutations: {
        change_n(state) {
            state.n++
        },
    },
    actions: {
        change_n(context) {
            context.commit('change_n')
        }
    }
})

<template>
<div>
  <Component1></Component1>
  <Component2></Component2>
</div>
</template>
  
<script>
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
  
export default {
  name: 'App',
  components: {
    Component1,Component2
  }
}
</script>
  
<style>
  
</style>

<template>
  <div class="component1">
    <h1>You have clicked {{ labeltext }} times</h1>
  </div>
</template>
  
<script>
//Importing store
import store from '../store';
export default {
  name: "Component1",
  computed: {
  labeltext () {
    //Accessing the store's state
    return store.state.n
  }
}
};
</script>
  
  
<style scoped>
.component1 {
  display: block;
  background-color: green;
  height: 15em;
  text-align: center;
  color: white;
  padding-top: 5em;
}
</style>

<template>
  <div class="component2">
    <button @click="count">Click</button>
  </div>
</template>
  
<script>
//Importing store
import store from '../store';
export default {
  name: "Component2",
  methods: {
    count() {
      //Triggering Actions with the store.dispatch method
      store.dispatch('change_n')
    },
  },
};
</script>
  
  
<style scoped>
.component2 {
  display: block;
  background-color: grey;
  height: 15em;
  text-align: center;
  padding-top: 5em;
}
</style>

Producción: