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
- 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 - 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: {}}) - 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"); - 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.
