This page looks best with JavaScript enabled

Vuex Helper Functions

 ·   ·  ☕ 2 min read

Use helper functions to access Vuex capabilities and greatly increase readability of your code.

We will consider the following Vuex store for a quick demonstration -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// store/index.js
import Vue from "vue";
import Vuex from "vuex";
import user from "./user";
import account from "./account";

Vue.use(Vuex);

export default new Vuex.Store({
  namespaced: true,
  name: "global",
  modules: {
    user,
    account
  }
});

My user 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
35
36
37
38
39
//store/user.js
import axios from "axios";

export default {
  namespaced: true,
  name: "users",
  state: {
    users: [],
    loading: false,
    error: ""
  },
  mutations: {
    setUsers(state, users) {
      state.users = users;
    },
    setLoading(state, loading) {
      state.loading = loading;
    },
    setError(state, error) {
      state.error = error;
    }
  },
  actions: {
    fetchUsers({ commit, state }, params) {
      commit("setLoading", true);
      commit("setError", "");

      axios
        .get("http://myServer.com/api/get-users")
        .then(({ data }) => {
          commit("setUsers", data);
        })
        .catch(e => {
          commit("setError", "Error fetching user records.");
        })
        .finally(commit("setLoading", false));
    }
  }
};

Refer creating modular Vuex post if you do not understand this structure.

After you define a typical store, you can access your store like so -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!-- User.vue -->
<template>
  {{ users }}
</template>
<script>
  export default {
    computed: {
      users() {
        return this.$store.state.user.users;
      }
    },
    mounted() {
      this.$store.user.dispatch("fetchUsers");
    }
  };
</script>

As you can imagine, using this.$store.state.* gets unreadable too quickly.

Helper functions like mapState, mapGetters, mapActions, and mapMutations make this repetitive code go away. I can access user Vuex store in my view with the following -

 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
<!-- views/User.vue -->
<template>
  <p v-if="error" class="error">{{error }}</p>
  <p>
    {{ users }}
  </p>
</template>

<script>
  import { mapState, mapMutations, mapActions } from "vuex";
  import Panel from "../components/Panel";

  export default {
    computed: {
      ...mapState("user", ["users", "error"])
      // states are now accessible as any other computed property
    },

    methods: {
      ...mapMutations("user", ["setError"]),
      ...mapActions("user", ["fetchUsers"])
      // actions and mutations from store are now accessible
      //   .. as any other methods
    },

    mounted() {
      this.fetchUsers();
    }
  };
</script>
Stay in touch!
Share on

Prashanth Krishnamurthy
WRITTEN BY
Prashanth Krishnamurthy
Technologist | Creator of Things


What's on this Page