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

HOME

En aquest tema, aprendrem com integrar Vuex en els components de Vue.js per gestionar l'estat de l'aplicació de manera eficient. Vuex és una llibreria de gestió d'estat per a aplicacions Vue.js, que permet centralitzar l'estat en un únic lloc i facilitar la comunicació entre components.

Objectius

Entendre com accedir a l'estat de Vuex des dels components.
Aprendre a utilitzar getters, mutacions i accions en components.
Veure exemples pràctics d'ús de Vuex en components.

Accedint a l'estat de Vuex

Per accedir a l'estat de Vuex des d'un component, utilitzem la propietat this.$store.state. Vegem un exemple:

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  }
});

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

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

<!-- App.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

Utilitzant Getters

Els getters són funcions que permeten accedir a l'estat de manera derivada. Són similars a les propietats computades en Vue.js. Vegem com utilitzar-los:

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

<!-- App.vue -->
<template>
  <div>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
};
</script>

Utilitzant Mutacions

Les mutacions són l'única manera de modificar l'estat en Vuex. Són funcions síncrones que reben l'estat com a primer argument. Vegem un exemple:

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

<!-- App.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};
</script>

Utilitzant Accions

Les accions són similars a les mutacions, però poden ser asíncrones. S'utilitzen per a operacions que poden trigar temps, com ara sol·licituds HTTP. Vegem un exemple:

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

<!-- App.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

Exercicis Pràctics

Exercici 1: Afegir un Decrement

Afegiu una mutació decrement a store.js que decrements el valor de count.
Afegiu un botó a App.vue que cridi a la mutació decrement quan es faci clic.

Solució

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  }
});

<!-- App.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    }
  }
};
</script>

Exercici 2: Afegir una Acció Asíncrona per Decrementar

Afegiu una acció decrementAsync a store.js que decrements el valor de count després d'un segon.
Afegiu un botó a App.vue que cridi a l'acció decrementAsync quan es faci clic.

Solució

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
    decrementAsync({ commit }) {
      setTimeout(() => {
        commit('decrement');
      }, 1000);
    }
  }
});

<!-- App.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementAsync">Increment Async</button>
    <button @click="decrementAsync">Decrement Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
    decrementAsync() {
      this.$store.dispatch('decrementAsync');
    }
  }
};
</script>

Conclusió

En aquesta secció, hem après com utilitzar Vuex en components de Vue.js per gestionar l'estat de l'aplicació. Hem vist com accedir a l'estat, utilitzar getters, mutacions i accions, i hem practicat amb exercicis. Amb aquests coneixements, estem preparats per gestionar l'estat de les nostres aplicacions Vue.js de manera més eficient i organitzada.

Utilitzant Vuex en components

Objectius

Accedint a l'estat de Vuex

Utilitzant Getters

Utilitzant Mutacions

Utilitzant Accions

Exercicis Pràctics

Exercici 1: Afegir un Decrement

Solució

Exercici 2: Afegir una Acció Asíncrona per Decrementar

Solució

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