Numerous Ways to a Vuex Store

Vue is great and Vuex makes it greater. But, how do you use them stores?

Vuex: You exy thing

Vuex makes it a breeze to handle states, mutations and actions in Vue. All I need to do is follow a couple of steps.

Step 1: Select Vuex as an option when you create the Vue application (or, you can always add it later)

Step 2: Vuex is already added for you - see below code in main.js -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// main.js

// ... code

import store from "./store";

//..

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

The src/store folder has an index file created by default. You can use it as-is or add modules for more fun.

It is time to put the store to some good use. You can access a store as-is or with modules using one of the following means -

State: Access state to read variable values
Mutations: Update values through mutations
Actions: Can also update state, but it is good to go through mutations

You can use these store functions in rest of Vue.

Option 1: Use store helpers in components and views

Create a simple import statement and access your state variables.

 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


<!-- any *.vue file -->

<template>
  <!-- lot of code -->

  {{ first_name }}

  <br /><br />
  <label for="firstName">First Name</label>
  <input name="firstName" type="text" v-model="first_name" />

  <!-- code -->
</template>

<script>
  import { mapState, mapMutations } from "vuex";

  // more code

  export default {
    computed: {
      ...mapState("contact", ["first_name"]),
    },

    methods: {
      ...mapMutations("contact", ["setFirstName"]),

      validateAndUpdateFirstName(val) {
        if (val.length > 2) this.setFirstName(val);
        else throw new Exception("Are you sure you are a real person?");
      },
    },
  };
</script>

This is cool, but you can save a bunch of “typing” - which brings us to Option 2.

Option 2: Use Pathify

Instead of doing a mapState and mapMutations - you let Pathify handle everything for you.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<template>
  <!-- code -->
</template>

<script>
  import { sync } from "vuex-pathify";

  export default {
    computed: {
      ...mapSync("contact", "first_name"),
      // you can access first_name or update it directly
    },

    methods: {
      validateAndUpdateFirstName(val) {
        if (val.length > 2) this.first_name = val;
        else throw new Exception("Are you sure you are a real person?");
      },
    },
  };
</script>

Option 3: Use `store` as a function

You could just use store to access access or update state. This more common in store modules.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// src/store/contact.js

import store from "../store";

// ... code

export default {
  actions: {
    async updateContact({ commit }, params) {
      // ..

      store.set("action/updateCall", actionData);
      // `commit("action/updateCall",actionData, { root: true }) does the same thing - but only sane people do that
    },
  },
};
// ...code

Accessing store from a router is similar to the above depiction.

You could import the store in your components/views as well and do the same, but there is a shortcut -

 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


<template>
  <!-- code -->

  {{ firstName }}

  <!-- code -->
</template>

<script>
  export default {
    computed: {
      firstName() {
        return this.$store.state.contact.first_name;
      },
      // you can access first_name or update it directly
    },

    methods: {
      validateAndUpdateFirstName(val) {
        if (val.length > 2) this.$store.commit("setFirstName", val);
        else throw new Exception("Are you sure you are a real person?");
      },
    },
  };
</script>

Recommendation

Use Pathify. Period.

If you don’t want to use a third party library - use Vuex helper functions like mapState. You will make it easier on yourself by standardizing the state access/updates throughout the project, and more importantly, cutting across development teams.