Instalar y configurar Vuex en Vue3

En este artículo os mostraré como instalar y configurar Vuex en la versión 3 de Vue.js. Pero antes de empezar a picar código vamos a ver que es Vuex.

¿Que es vuex?

Vuex se podría definir como una librería para la gestión del estado que sirve como un almacén centralizado para todos los componentes de una aplicación Vue, con reglas que garantizan que el estado se puede cambiar de manera predecible.

Como instalar y configurar Vuex en Vue3

Tiempo necesario: 15 minutos.

Pasos a seguir para instalar y configurar Vuex en Vue3

  1. Instalar la versión 4 de vuex

    Instalaremos la versión 4 de Vuex para que sea compatible con Vue3. Para ello ejecutamos el siguiente comando:
    npm i -S vuex@next

  2. Creamos el archivo store.js

    Dentro de la carpeta src creamos el archivo store.js con el siguiente contenido:

    import { createStore } from 'vuex'

    export default createStore({
    state: { userData: "USER!"

    }, mutations: {

    }, actions: {

    }, getters: {

    }
    })

  3. Editamos el archivo main.js

    Editamos el archivo main.js y lo dejamos de esta manera:

    import { createApp } from 'vue'
    import App from './App.vue'
    import store from './store'

    const app = createApp(App);
    app.use(store);
    app.mount("#app");

  4. Importamos la función useStore()

    En el componente donde queramos usar vuex tenemos que importar la función useStore de la siguiente manera:

    import { useStore } from ‘vuex’

    export default {

    name: «ComponentePrueba»,
    setup(props, context){

    const store = useStore()
    console.log(store)

    }
    }

Una vez realizados estos pasos ya tendríamos instalado Vuex en nuestro proyecto.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Las siguientes reglas del RGPD deben leerse y aceptarse:
Este formulario recopila tu nombre, correo electrónico y e contenido para que podamos realizar un seguimiento de los comentarios dejados en la web. Para más información revisa nuestra política de privacidad, donde encontrarás más información sobre dónde, cómo y por qué almacenamos tus datos.