El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo integrar Vuex en nuestros componentes de Vue.js para gestionar el estado de la aplicación de manera eficiente. Vuex es una biblioteca de gestión de estado para aplicaciones Vue.js, que nos permite centralizar el estado y la lógica de nuestra aplicación.

Introducción a Vuex en Componentes

Para usar Vuex en nuestros componentes, primero debemos asegurarnos de que Vuex esté configurado en nuestra aplicación. Si aún no lo has hecho, puedes seguir los pasos del módulo anterior sobre Configuración de Vuex.

Una vez que Vuex esté configurado, podemos acceder al estado, getters, mutaciones y acciones desde nuestros componentes.

Accediendo al Estado de Vuex

Para acceder al estado de Vuex en un componente, utilizamos la propiedad this.$store.state. Aquí hay un ejemplo básico:

<template>
  <div>
    <h1>{{ count }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
}
</script>

En este ejemplo, estamos accediendo al estado count desde el almacén de Vuex y lo estamos mostrando en el componente.

Usando Getters en Componentes

Los getters en Vuex son funciones que nos permiten acceder a valores derivados del estado. Para usar getters en un componente, utilizamos this.$store.getters.

<template>
  <div>
    <h1>{{ doubleCount }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
}
</script>

En este ejemplo, doubleCount es un getter definido en nuestro almacén de Vuex que devuelve el doble del valor de count.

Despachando Acciones desde Componentes

Para modificar el estado en Vuex, utilizamos acciones y mutaciones. Las acciones se despachan desde los componentes utilizando this.$store.dispatch.

<template>
  <div>
    <button @click="increment">Incrementar</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
}
</script>

En este ejemplo, estamos despachando la acción increment cuando se hace clic en el botón. La acción increment luego llamará a una mutación para actualizar el estado.

Ejemplo Práctico

Vamos a combinar todo lo que hemos aprendido en un ejemplo práctico. Supongamos que tenemos un almacén de Vuex con el siguiente estado, getters, acciones y mutaciones:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

Ahora, en nuestro componente, podemos acceder al estado, usar getters y despachar acciones:

<template>
  <div>
    <h1>Contador: {{ count }}</h1>
    <h2>Contador Doble: {{ doubleCount }}</h2>
    <button @click="increment">Incrementar</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
}
</script>

Ejercicio Práctico

Ejercicio

Crea un componente que muestre una lista de tareas y permita agregar nuevas tareas. Usa Vuex para gestionar el estado de las tareas.

Define el estado inicial en Vuex con una lista de tareas vacía.
Crea una mutación para agregar una nueva tarea.
Crea una acción que despache la mutación de agregar tarea.
En el componente, muestra la lista de tareas y un formulario para agregar nuevas tareas.

Solución

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task);
    }
  },
  actions: {
    addTask({ commit }, task) {
      commit('addTask', task);
    }
  }
});

<template>
  <div>
    <h1>Lista de Tareas</h1>
    <ul>
      <li v-for="task in tasks" :key="task">{{ task }}</li>
    </ul>
    <input v-model="newTask" placeholder="Nueva tarea" />
    <button @click="addTask">Agregar Tarea</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: ''
    };
  },
  computed: {
    tasks() {
      return this.$store.state.tasks;
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.$store.dispatch('addTask', this.newTask);
        this.newTask = '';
      }
    }
  }
}
</script>

Conclusión

En esta sección, hemos aprendido cómo integrar Vuex en nuestros componentes de Vue.js. Hemos visto cómo acceder al estado, usar getters y despachar acciones desde los componentes. Además, hemos trabajado en un ejemplo práctico y un ejercicio para reforzar los conceptos aprendidos.

En el siguiente módulo, exploraremos las directivas de Vue.js, tanto las incorporadas como las personalizadas, para mejorar la funcionalidad de nuestras aplicaciones.

Usando Vuex en Componentes

Contenido

Introducción a Vuex en Componentes

Accediendo al Estado de Vuex

Usando Getters en Componentes

Despachando Acciones desde Componentes

Ejemplo Práctico

Ejercicio Práctico

Ejercicio

Solución

Conclusión

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js