Example Vuex with some comment notes
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// store.js import Vuex from "vuex"; import Vue from "vue"; Vue.use(Vuex); export const store = new Vuex.Store({ state: { count: 0 }, getters: {}, mutations: { //mutations alters state directly i.e. state.count=0; //can't have async code ( ajax) , must use actions exampleMutator:state=> { state.count = 10; }, exampleMutatorWithPayload(state, payload) { console.log(payload); }, increment: state => { state.count++; }, }, actions: { // provides context to update the state //i.e exampleAction: context => { //context is passed by Vuex and is how we can run async code to // eventually be committed. context.commit("exampleMutator"); }, // or deconstruct to get commit , payload is second parameter exampleActions2: ({ commit }, payload) => { console.log(payload); commit("exampleMutatorWithPayload", payload); } } }); |
In main.js we add the store via:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from "vue"; import App from "./App"; import { store } from "./store/store"; Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ store, el: "#app", components: { App }, template: "<App/>" }); |
In a component that uses something in the store:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//example component.js import { mapActions } from "vuex"; export default { name: "Counter", methods: { // using mapActions makes it much faster, payload is automatically passed in ...mapActions({ increment: "increment", decrement: "decrement", multiplyBy: "multiply" }), otherNonStoreMethods(){ } // increment() { // // this is to directly use mutations. // //this.$store.commit("increment"); // //this is how to use actions instead. // this.$store.dispatch("increment"); // }, // decrement() { // // this is to directly use mutations. // //this.$store.commit("decrement"); // //using actions instead // this.$store.dispatch("decrement"); // }, // multiplyBy(by) { // this.$store.dispatch("multiply", by); // } } }; |
Mutations are for non-async updates to the Vuex store. Actions can use async code. Generally, should actions should always be used instead of Mutators.
If using Mutators.. the update to the store can happen directly. i.e. this.$store.commit('mutatorMethodThatUpdatesStore');
Actions use dispatch instead: this.$store.dispatch('mutatorMethodThatUpdatesStore');
3 useful methods from Vuex are:
mapGetters
mapMutations
mapActions
mapState – mapState should be used instead of creating “dummy” getters. Dummy getters are ones that simply just return the store’s state value.
Getters should be more used for computed type values or for things such as a filter etc.
For each of the 4 above..All have either an array of strings of names of state/getter/mutation/action or can pass in an object with key/value pairs if needing a different name. For example:
|
1 2 3 4 5 6 |
...mapActions({ multipleBy:'multiply' }); // This will map the store's action "multiply" to a component's // "multiplyBy" method. |