Instalación y boilerplate de Vuex

Clase 4 de 19 • Curso de Vue.js: Manejo del Estado con Vuex

Uriel Solis Salinas

student•

Instalación y boilerplate de Vuex

. Para instalar Vuex, primero necesitarás tener instalado Vue.js en tu proyecto. Luego, puedes instalar Vuex mediante el administrados de paquetes npm o yarn. .

Abre una terminal y navega hasta el directorio raíz de tu proyecto.
Ejecuta el siguiente comando:

npm install vuex --save

Este comando instalará Vuex en tu proyecto y agregará una entrada en el archivo package.json que indicará que Vuex es una dependencia de tu proyecto.

. Ahora, necesitarás crear el boilerplate para tu store Vuex. Aquí te presento un ejemplo básico de cómo hacerlo: .

Crea una nueva carpeta llamada store en la raíz de tu proyecto y dentro un archivo llamado **index.js**.
Agrega las siguientes líneas al archivo:

import { createStore } from "vuex";

const store = createStore({
  state: {
    // Define tu estado inicial aquí
  },
  mutations: {
    // Define tus mutaciones aquí
  },
  actions: {
    // Define tus acciones aquí
  },
  getters: {
    // Define tus getters aquí
  }
});

export default store;

Este código define una nueva instancia de Vuex Store con cuatro propiedades: state, mutations, actions y getters. Puedes definir tu estado inicial y tus mutaciones, acciones y getters personalizados aquí. . Una vez que hayas creado tu store Vuex, puedes agregarlo a tu aplicación Vue.js. Para hacer esto, agrega las siguientes líneas a tu archivo main.js:

import store from "./store";
app.use(store);

Esto agregará tu store Vuex a la instancia de Vue.js y lo hará disponible para su uso en tu aplicación. Con esto, ya tienes instalado y configurado Vuex en tu proyecto.

Instalación y boilerplate de Vuex

Introducción

¿Qué es VUEX y para qué sirve?

Manejo de estado

Patrón FLUX

Conceptos básicos

Instalación y boilerplate de Vuex

Estado simple con Options API

State

Getters

Mutations

Actions

Organización de código

Helpers

Modules

Espacios de nombres

Modelo de datos

Caso de uso: ChatApp con Vuex

Normalización

Canales

Mensajes

Canales y Mensajes

Contactos

Cierre del curso

Despedida