El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Introducció a Vuex

Següent ►
►

Què és Vuex?

Vuex és una biblioteca de gestió d'estat per a aplicacions Vue.js. Proporciona un emmagatzematge centralitzat per a totes les dades de l'aplicació, permetent una gestió més eficient i organitzada de l'estat. Vuex segueix el patró Flux, que facilita la previsibilitat i la traçabilitat de l'estat de l'aplicació.

Característiques clau de Vuex:

  • Emmagatzematge centralitzat: Totes les dades de l'aplicació es gestionen en un únic lloc.
  • Estat reactiu: Quan l'estat canvia, les vistes que depenen d'aquest estat es tornen a renderitzar automàticament.
  • Traçabilitat: Totes les mutacions de l'estat es registren, permetent una traçabilitat completa dels canvis.
  • Integració amb DevTools: Vuex es pot integrar amb les DevTools de Vue per a una depuració més fàcil.

Instal·lació de Vuex

Pas 1: Instal·lar Vuex

Per instal·lar Vuex, pots utilitzar npm o yarn:

npm install vuex --save

o

yarn add vuex

Pas 2: Configurar Vuex a la teva aplicació Vue

Després d'instal·lar Vuex, has de configurar-lo a la teva aplicació Vue. Aquí tens un exemple de com fer-ho:

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

export default store;
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

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

Conceptes bàsics de Vuex

Estat (State)

L'estat és l'objecte que conté totes les dades de l'aplicació. És reactiu, el que significa que qualsevol canvi en l'estat es reflectirà automàticament a les vistes que depenen d'aquest estat.

const state = {
  count: 0
};

Mutacions (Mutations)

Les mutacions són les úniques maneres de canviar l'estat a Vuex. Són funcions síncrones que reben l'estat com a primer argument i poden rebre un payload com a segon argument.

const mutations = {
  increment(state) {
    state.count++;
  }
};

Accions (Actions)

Les accions són funcions que poden contenir operacions asíncrones. Les accions no modifiquen directament l'estat, sinó que cometen mutacions.

const actions = {
  increment(context) {
    context.commit('increment');
  }
};

Getters

Els getters són funcions que permeten accedir a l'estat de manera derivada. Són similars a les propietats computades de Vue.

const getters = {
  count: state => state.count
};

Exemple pràctic

A continuació, es mostra un exemple pràctic d'una aplicació Vue que utilitza Vuex per gestionar l'estat d'un comptador.

Component Vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

Store Vuex

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

export default store;

Exercici pràctic

Exercici

Crea una aplicació Vue que utilitzi Vuex per gestionar l'estat d'una llista de tasques. La llista ha de permetre afegir i eliminar tasques.

Solució

Store Vuex

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task);
    },
    removeTask(state, taskIndex) {
      state.tasks.splice(taskIndex, 1);
    }
  },
  actions: {
    addTask(context, task) {
      context.commit('addTask', task);
    },
    removeTask(context, taskIndex) {
      context.commit('removeTask', taskIndex);
    }
  },
  getters: {
    tasks: state => state.tasks
  }
});

export default store;

Component Vue

<template>
  <div>
    <input v-model="newTask" placeholder="Add a new task" />
    <button @click="addTask(newTask)">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
        <button @click="removeTask(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  data() {
    return {
      newTask: ''
    };
  },
  computed: {
    ...mapGetters(['tasks'])
  },
  methods: {
    ...mapActions(['addTask', 'removeTask'])
  }
};
</script>

Conclusió

En aquesta secció, hem après què és Vuex, com instal·lar-lo i configurar-lo, i hem explorat els conceptes bàsics com l'estat, les mutacions, les accions i els getters. També hem vist un exemple pràctic d'una aplicació Vue que utilitza Vuex per gestionar l'estat d'un comptador i hem realitzat un exercici pràctic per gestionar una llista de tasques. Amb aquests coneixements, estàs preparat per aprofundir en la gestió d'estat amb Vuex en les teves aplicacions Vue.js.

◄ Anterior
◄
Següent ►
►

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats