Instalación y boilerplate de Vuex

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

Cristian Caballero

student•

Si es que al ejecutar el proyecto les arroja el error [plugin:vite:css] Preprocessor dependency "sass" not found. lo pueden solucionar instalando sass-loader con npm install -D sass sass-loader@latest

Fabricio Bencomo

student•

les dejo el comando para instalar vuex

npm install vuex@next --save

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.

Fabricio Orrala

student•

¿Con qué versión de node recomiendas usar para ésta clase y para el proyecto?

Cristian Caballero

student•

Yo estoy usando Node 16.16.0 y ningun problema

robert Medina

student•

ando rusando el node v18.13.0 y sin problema

Luis Alberto Ramirez

student•

recién estoy aprendiendo nuxt 3 por requerimiento de tecnología en el trabajo, sin embargo la diferencia principal es que en el trabajoesta basado en ts y aquí en js, cambia en cuanto a configuraciones pero la base es la misma.

Tómenlo en cuenta la posibilidad de utilizar ambos lenguajes aquellos quienes están tomando este curso, saludos.

Julian David Alzate Cuervo

student•

https://github.com/nerddiana/vue-vuex
```https://github.com/nerddiana/vue-vuex

Julian David Alzate Cuervo

student•

el curso no tiene el repositorio adjunto, alguien tiene el link?

Jose Alejandro Pantoja Giraldo

student•

.gitignore

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

Joel Suarez

student•

El repositorio tiene un conflicto con las ramas, podrían arreglarlo por favor.

Daniel Theran

student•

En mi caso al darle npm install me arrojaba un error de que no podia leer pickAlgorithm, basta con limpiar el cache con este comando npm cache clear --force y luego si npm install npm run dev

y listo ahi tienes tu app corriendo sin problemas

Carlos Rodríguez

student•

Con esta idea podemos hacer un clon de slack para ir practicamdo!