El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aplicacions grans, gestionar l'estat global pot esdevenir complex i difícil de mantenir. Vuex ofereix una solució elegant a aquest problema mitjançant l'ús de mòduls. Els mòduls permeten dividir l'estat de l'aplicació en submòduls més petits i independents, cadascun amb el seu propi estat, mutacions, accions, getters i fins i tot mòduls fills.

Què són els mòduls a Vuex?

Els mòduls a Vuex permeten dividir l'estat de l'aplicació en submòduls més petits i independents. Cada mòdul pot tenir el seu propi estat, getters, mutacions i accions, i fins i tot altres mòduls fills.

Beneficis dels mòduls

Organització: Faciliten l'organització del codi en aplicacions grans.
Escalabilitat: Permeten escalar l'aplicació de manera més fàcil i mantenible.
Reutilització: Els mòduls poden ser reutilitzats en diferents parts de l'aplicació.

Creació d'un mòdul

Per crear un mòdul, simplement definim un objecte amb les propietats state, getters, mutations i actions, i després l'afegim a l'objecte modules en la instància de Vuex.

// store/modules/counter.js
const state = {
  count: 0
};

const getters = {
  doubleCount: state => state.count * 2
};

const mutations = {
  increment: state => state.count++
};

const actions = {
  incrementAsync: ({ commit }) => {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
};

export default {
  state,
  getters,
  mutations,
  actions
};

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

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    counter
  }
});

Nesting de mòduls

Els mòduls poden contenir altres mòduls, permetent una estructura jeràrquica. Això és útil per a aplicacions molt grans on es necessita una organització més detallada.

// store/modules/nestedModule.js
const state = {
  nestedCount: 0
};

const mutations = {
  incrementNested: state => state.nestedCount++
};

export default {
  state,
  mutations
};

// store/modules/parentModule.js
import nestedModule from './nestedModule';

const state = {
  parentCount: 0
};

const mutations = {
  incrementParent: state => state.parentCount++
};

export default {
  state,
  mutations,
  modules: {
    nestedModule
  }
};

Accés a l'estat i getters de mòduls

Quan accedim a l'estat o als getters d'un mòdul, utilitzem el nom del mòdul com a prefix.

// Accés a l'estat
this.$store.state.counter.count;

// Accés als getters
this.$store.getters['counter/doubleCount'];

Exemple pràctic

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

// store/modules/user.js
const state = {
  user: null
};

const getters = {
  isAuthenticated: state => !!state.user
};

const mutations = {
  setUser: (state, user) => state.user = user
};

const actions = {
  login: ({ commit }, user) => {
    // Simulació d'un login
    setTimeout(() => {
      commit('setUser', user);
    }, 1000);
  }
};

export default {
  state,
  getters,
  mutations,
  actions
};

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

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user
  }
});

<!-- App.vue -->
<template>
  <div>
    <p v-if="isAuthenticated">Benvingut, {{ user.name }}</p>
    <button v-else @click="login">Iniciar Sessió</button>
  </div>
</template>

<script>
export default {
  computed: {
    isAuthenticated() {
      return this.$store.getters['user/isAuthenticated'];
    },
    user() {
      return this.$store.state.user.user;
    }
  },
  methods: {
    login() {
      this.$store.dispatch('user/login', { name: 'John Doe' });
    }
  }
};
</script>

Exercicis

Crear un mòdul de productes:
- Crea un mòdul products amb l'estat products (una llista de productes).
- Afegeix una mutació setProducts per establir la llista de productes.
- Afegeix una acció fetchProducts que simuli la recuperació de productes d'una API i cridi a la mutació setProducts.
Nesting de mòduls:
- Crea un mòdul cart amb l'estat items (una llista d'articles al carret).
- Afegeix una mutació addItem per afegir un article al carret.
- Afegeix el mòdul cart com a submòdul del mòdul products.

Solucions

Mòdul de productes:

// store/modules/products.js
const state = {
  products: []
};

const mutations = {
  setProducts: (state, products) => state.products = products
};

const actions = {
  fetchProducts: ({ commit }) => {
    // Simulació d'una crida a una API
    setTimeout(() => {
      const products = [
        { id: 1, name: 'Producte 1' },
        { id: 2, name: 'Producte 2' }
      ];
      commit('setProducts', products);
    }, 1000);
  }
};

export default {
  state,
  mutations,
  actions
};

Nesting de mòduls:

// store/modules/cart.js
const state = {
  items: []
};

const mutations = {
  addItem: (state, item) => state.items.push(item)
};

export default {
  state,
  mutations
};

// store/modules/products.js
import cart from './cart';

const state = {
  products: []
};

const mutations = {
  setProducts: (state, products) => state.products = products
};

const actions = {
  fetchProducts: ({ commit }) => {
    // Simulació d'una crida a una API
    setTimeout(() => {
      const products = [
        { id: 1, name: 'Producte 1' },
        { id: 2, name: 'Producte 2' }
      ];
      commit('setProducts', products);
    }, 1000);
  }
};

export default {
  state,
  mutations,
  actions,
  modules: {
    cart
  }
};

Conclusió

Els mòduls a Vuex són una eina poderosa per organitzar i gestionar l'estat en aplicacions grans. Permeten dividir l'estat en submòduls més petits i independents, facilitant l'escalabilitat i mantenibilitat del codi. Amb la pràctica, els mòduls esdevenen una part essencial del desenvolupament d'aplicacions Vue.js complexes.

Mòduls a Vuex

Continguts

Què són els mòduls a Vuex?

Beneficis dels mòduls

Creació d'un mòdul

Nesting de mòduls

Accés a l'estat i getters de mòduls

Exemple pràctic

Exercicis

Solucions

Conclusió

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