Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Tutorial de VuexTutorial de Vuex

 Vuex es la biblioteca de administración estatal oficial para aplicaciones Vue.

En este tutorial para principiantes, aprenderá sobre Vuex y cómo puede usarlo para lidiar con requisitos de datos complejos en su aplicación de front-end.

En este tutorial, asumimos que no tienes experiencia previa trabajando con Vuex.

Comencemos con este tutorial, entonces, ¿qué es Vuex?

Vuex es una implementación de Vue del patrón de gestión de estado de Flux. Es una biblioteca para trabajar con datos en sus aplicaciones Vue.

Vuex es la biblioteca de administración estatal oficial para Vue.js

Vuex permite a los desarrolladores hacer que la administración de datos complejos sea más fácil y más eficiente mediante el uso de un almacén de datos global al que se puede acceder desde todos los componentes de la aplicación Vue para obtener o configurar datos.

Vuex le permite compartir datos de manera eficiente entre los componentes de la aplicación.

Los componentes de Vue pueden usar diferentes formas de comunicar datos entre sí, como:

  • props : los props se utilizan para pasar el estado de un componente principal a sus hijos,
  • eventos : los eventos se utilizan para cambiar el estado de un componente de sus hijos.

Los accesorios y eventos pueden ser suficientes para escenarios simples, pero una vez que los requisitos de datos para su aplicación se vuelven complejos, necesitará implementar otras estrategias o patrones avanzados.

Entre estos patrones se encuentra el patrón Flux, que tiene como objetivo centralizar el estado en una aplicación. En una aplicación de Vue, puede implementar este patrón usando Vuex.

Otra implementación popular del patrón Flux es Redux, que es más popular entre los desarrolladores de React. Pero Redux es independiente del marco, lo que significa que también puede usarlo con Vue.

Dicho esto, Vuex es la mejor opción en Vue porque ofrece una mejor integración ya que es la biblioteca oficial para la administración estatal en Vue.

Prerrequisitos

Para poder competir en este tutorial, debe tener algunos requisitos como:

  • Un entorno de desarrollo preparado con Node.js 8.9+ y NPM instalado,
  • Un conocimiento básico de JavaScript moderno,
  • Una experiencia laboral de Vue.js.

Eso es todo lo que necesitas. Instalará los otros requisitos a lo largo de este tutorial.

Instalación de la CLI de Vue.js v3

En este tutorial, usaremos la última versión de la CLI de Vue.js para generar un nuevo proyecto de Vue, así que primero comencemos instalando la CLI.

Regrese a su terminal y ejecute el siguiente comando:

$ npm install @vue/cli -g 

Dado que está instalando la CLI globalmente en su sistema, asegúrese de tener los permisos necesarios configurando su configuración de npm o simplemente use sudo antes de ejecutar el comando.

Creando un nuevo proyecto de Vue.js

Después de instalar la CLI de Vue, usémosla para generar un nuevo proyecto ejecutando el siguiente comando en su terminal:

$ vue create vuex-demo

Esto generará un vuex-demoproyecto en su directorio actual.

La CLI solicitará un ajuste preestablecido que se utilizará para su proyecto. También puede elegir manualmente las funciones necesarias para su proyecto de un conjunto de complementos oficiales como Babel, TypeScript, PWA, Vue Router y Vuex.

Así que continúe y seleccione manualmente Babel, Vue Router y Vuex para su proyecto.

La CLI también le pedirá otras opciones para configurar el enrutador, como router historydedicated config filesTambién puede elegir si desea guardar el preset o no.

Para asegurarse de que todo funcione como se esperaba, navegue dentro de la carpeta de su proyecto:

$ cd vuex-demo

A continuación, ejecute el servidor de desarrollo usando:

$ npm run serve

Debería poder ir a la localhost;8080dirección para ver su aplicación ejecutándose:

Eso es todo, ahora está listo para comenzar a aprender Vuex implementando una aplicación simple que administra su estado utilizando una tienda central.

Crear los componentes

Ahora que hemos creado nuestro proyecto, creemos los componentes de nuestra aplicación.

Debajo de la src/componentscarpeta, cree dos archivos ContactList.vueContactDetail:

$ cd src/components
$ touch ContactList.vue
$ touch ContactDetail.vue

A continuación, abra el src/App.vuearchivo y agregue un enlace al ContactList.vuecomponente:

<template>
<div id="app">
<nav>
<router-link to="/contacts" exact>Contact List</router-link>
</nav>
<router-view/>
</div>
</template>

A continuación, abra el src/router.jsarchivo y agregue una nueva ruta al ContactList.vuecomponente:

import ContactList from './components/ContactList.vue'
import ContactDetail from './components/ContactDetail.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  linkClass: "nav-link",
  linkActiveClass: "active",
  routes: [
    {
      path: '/contacts',
      name: 'list',
      component: ContactList    },
    {
      path: '/contacts/:id',
      name: 'detail',
      component: ContactDetail
    },
  ]
})

Por ahora, agregue la siguiente plantilla dentro del src/components/ContactList.vuearchivo:

<template>
  <div class="contact-list">
    <h1>
        Contact List
    </h1>
  </div>
</template>

También dentro del src/components/ContactDetail.vuearchivo, agregue la siguiente plantilla:

<template>
  <div class="contact-detail">
    <h1>
        Contact Details
    </h1>
  </div>
</template>

Eso es todo por ahora sobre componentes.

Los fundamentos de Vuex

Antes de continuar construyendo nuestra aplicación Vue, primero comprendamos los conceptos básicos de Vuex.

¿Qué es una tienda Vuex?

Una tienda Vuex es un objeto central para almacenar datos en su aplicación Vue. También proporciona diferentes métodos para acceder y cambiar el estado global.

Este es un ejemplo de una tienda básica:

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

Vue.use(Vuex)

export default new Vuex.Store({})

Usamos el Vuex.Storemétodo para crear una tienda. Toma diferentes propiedades, como:

  • stateeste objeto contiene el estado real de la aplicación, es decir, cualquier variable y matriz, etc.
  • mutations: este objeto contiene los métodos que se utilizarán para mutar el estado,
  • actions: este objeto contiene métodos que llaman a los métodos de mutación.

Mutaciones

Las mutaciones son funciones que le permiten mutar y mejorar el estado en una tienda Vuex. Estas funciones no se pueden llamar directamente, sino que deben confirmarse utilizando el .commit('mutation')de la tienda Vuex.

Las mutaciones son funciones sincrónicas.

Comportamiento

Las acciones son funciones que pueden utilizarse para cometer las mutaciones.

Las acciones pueden realizar operaciones asincrónicas.

Conclusión

En esta primera parte del tutorial de Vuex, instalamos la CLI de Vue y la usamos para crear una demostración de Vue que se utilizará para demostrar los diferentes conceptos de Vuex.

También hemos visto conceptos básicos como la tienda Vuex, estado, mutaciones y acciones.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas