Saltar al contenido

tutorial de Gestión del Estado vue usando VuexDec, 14thIn este tutorial, vamos a aprender acerca de cómo administrar el estado …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo administrar el estado en el vue.js aplicaciones mediante el uso de la biblioteca vuex.

¿Cuál es Vuex?

Vuex es la biblioteca de gestión estatal creada por el equipo central Vue que nos ayuda a administrar el estado centralizado en aplicaciones vue significa que podemos mantener nuestro estado de la aplicación entera en un solo lugar.

por eso que necesitamos Vuex?

En grandes aplicaciones, es difícil mantener el estado de aplicación en componentes y compartir datos entre otros componentes por el uso de accesorios que a menudo es impredecible, por lo que necesitamos la ‘vuex’ para crear un estado centralizado.

Introducción

Este tutorial asume que ya ha instalado cli VUE en su PC.

Vamos a crear una nueva aplicación vue ejecutando el siguiente comando en el terminal.

vue create learn-vuex && cd $_

Este comando anterior crea una carpeta nuevo proyecto vue dentro aprender-vuex y también cambiar el directorio de trabajo actual para aprender-vuex.

Instalación Vuex

vamos a instalar la biblioteca vuex ejecutando el siguiente comando.

npm i vuex

Crear tienda vuex

Una vez que ha instalado con éxito el vuexlibrary Ahora abra su carpeta de aprender, vuex en su editor y favoritecode crear un nuevo archivo llamado store.js en su carpeta src.

En el código anterior, hemos importado un ‘vuex’ vue biblioteca y decirle a utilizar la biblioteca Vuex.

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

Vue.use(Vuex);

export const store = new Vuex.Store({});

La tienda está llevando a cabo nuestro estado aplicación general en un objeto JavaScript reactiva que significa que si nos ponemos al día en un estado en el mismo lugar también actualizará el estado en otros lugares lo usamos. Acceso

al objeto de almacén dentro de sus componentes vue tenemos que pasar a la tienda a nuestra vue raíz de la instancia presente en el interior de archivos main.js. complemento de

import Vue from 'vue'
import App from './App.vue'
import { store } from './store';

Vue.config.productionTip = false
new Vue({
store, render: h => h(App),
}).$mount('#app')

dejar que un console.log dentro de nuestro archivo App.vue para ver si la tienda está disponible en vuex componentes vue.