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

HOME

En aquest tema, explorarem alguns patrons avançats que poden ajudar-te a gestionar l'estat de la teva aplicació de manera més eficient i escalable. Aquests patrons són especialment útils en aplicacions grans i complexes.

Contingut

Patró de Mòduls Dinàmics
Patró de Normalització de l'Estat
Patró de Composició de Mòduls
Patró de Persistència de l'Estat
Patró de Middleware

Patró de Mòduls Dinàmics

Què és?

Els mòduls dinàmics permeten registrar mòduls Vuex de manera dinàmica en temps d'execució. Això és útil quan tens mòduls que només necessites carregar sota certes condicions.

Exemple

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
});

export default store;

// dynamicModule.js
const dynamicModule = {
  state: {
    dynamicData: 'This is dynamic data'
  },
  mutations: {
    setDynamicData(state, payload) {
      state.dynamicData = payload;
    }
  },
  actions: {
    updateDynamicData({ commit }, payload) {
      commit('setDynamicData', payload);
    }
  }
};

// Somewhere in your component
store.registerModule('dynamicModule', dynamicModule);

Explicació

Definició del mòdul dinàmic: Es defineix un mòdul Vuex com qualsevol altre mòdul.
Registre del mòdul: Utilitzem store.registerModule per registrar el mòdul dinàmicament.

Patró de Normalització de l'Estat

Què és?

La normalització de l'estat implica estructurar l'estat de manera que es redueixi la redundància i es millori l'eficiència de les operacions de lectura i escriptura.

Exemple

// state.js
const state = {
  users: {
    byId: {
      1: { id: 1, name: 'John Doe' },
      2: { id: 2, name: 'Jane Doe' }
    },
    allIds: [1, 2]
  }
};

// getters.js
const getters = {
  getUserById: (state) => (id) => {
    return state.users.byId[id];
  },
  getAllUsers: (state) => {
    return state.users.allIds.map(id => state.users.byId[id]);
  }
};

Explicació

Estructura de l'estat: L'estat es divideix en dos objectes: byId i allIds.
Getters: Els getters s'utilitzen per accedir a les dades normalitzades de manera eficient.

Patró de Composició de Mòduls

Què és?

Aquest patró implica dividir l'estat en mòduls més petits i reutilitzables que es poden combinar per formar l'estat global.

Exemple

// userModule.js
const userModule = {
  state: {
    users: []
  },
  mutations: {
    setUsers(state, users) {
      state.users = users;
    }
  },
  actions: {
    fetchUsers({ commit }) {
      // Simulació d'una crida a una API
      const users = [{ id: 1, name: 'John Doe' }];
      commit('setUsers', users);
    }
  }
};

// productModule.js
const productModule = {
  state: {
    products: []
  },
  mutations: {
    setProducts(state, products) {
      state.products = products;
    }
  },
  actions: {
    fetchProducts({ commit }) {
      // Simulació d'una crida a una API
      const products = [{ id: 1, name: 'Product A' }];
      commit('setProducts', products);
    }
  }
};

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import userModule from './userModule';
import productModule from './productModule';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    user: userModule,
    product: productModule
  }
});

export default store;

Explicació

Definició de mòduls: Es defineixen mòduls separats per a usuaris i productes.
Composició de mòduls: Els mòduls es combinen en la creació de la botiga Vuex.

Patró de Persistència de l'Estat

Què és?

Aquest patró implica emmagatzemar l'estat de Vuex en un emmagatzematge persistent com localStorage o sessionStorage per mantenir l'estat entre recàrregues de pàgina.

Exemple

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
      localStorage.setItem('user', JSON.stringify(user));
    }
  },
  actions: {
    loadUser({ commit }) {
      const user = JSON.parse(localStorage.getItem('user'));
      if (user) {
        commit('setUser', user);
      }
    }
  }
});

export default store;

Explicació

Mutació: La mutació setUser emmagatzema l'usuari tant en l'estat com en localStorage.
Acció: L'acció loadUser carrega l'usuari des de localStorage quan l'aplicació s'inicia.

Patró de Middleware

Què és?

El patró de middleware implica utilitzar funcions intermediàries per interceptar i modificar accions o mutacions abans que arribin a l'estat.

Exemple

// loggerMiddleware.js
const loggerMiddleware = store => next => mutation => {
  console.log('Previous State:', store.state);
  console.log('Mutation:', mutation);
  next(mutation);
  console.log('Next State:', store.state);
};

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  plugins: [loggerMiddleware]
});

export default store;

Explicació

Middleware: La funció loggerMiddleware intercepta les mutacions i registra l'estat abans i després de la mutació.
Plugins: El middleware es registra com un plugin en la creació de la botiga Vuex.

Conclusió

En aquest tema, hem explorat diversos patrons avançats de Vuex que poden ajudar-te a gestionar l'estat de la teva aplicació de manera més eficient i escalable. Aquests patrons són especialment útils en aplicacions grans i complexes. Practica aquests patrons en els teus projectes per veure com poden millorar la teva gestió de l'estat.

Exercici Pràctic:

Implementa un mòdul dinàmic en una aplicació Vuex existent.
Normalitza l'estat d'una aplicació Vuex que gestioni una llista d'articles.
Divideix l'estat d'una aplicació gran en mòduls més petits i reutilitzables.
Implementa la persistència de l'estat utilitzant localStorage.
Crea un middleware que registri totes les accions i mutacions en la consola.

Solucions:

Les solucions als exercicis pràctics es poden trobar en el repositori del curs. Practica aquests patrons per millorar la teva comprensió i habilitats en la gestió de l'estat amb Vuex.

Patrons avançats de Vuex

Contingut

Patró de Mòduls Dinàmics

Què és?

Exemple

Explicació

Patró de Normalització de l'Estat

Què és?

Exemple

Explicació

Patró de Composició de Mòduls

Què és?

Exemple

Explicació

Patró de Persistència de l'Estat

Què és?

Exemple

Explicació

Patró de Middleware

Què és?

Exemple

Explicació

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