Select Page

Congratulations, you’ve made it to set up your Vue project on typescript! You’ve also built some components and now you want to set up Vuex but how?

Here’s a short tutorial to get you started.

On working with pure Vue application our store usually looks like.

const moduleA = { 
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({modules: { a: moduleA, b: moduleB }})

Using modules, we can have different stores and it looks perfect but what about writing it in class style component.

To get started we need a dependency vuex-module-decorators, it’s a great library as it adds decorator power to vuex.

Now, to get started let’s build a sample module and wire it up with our store and use it in our application.

So, let’s begin building an empty store file.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
state: {},
actions: {},
mutations: {},
});

Easy, now we have our initial store and let’s wire it up at our root file which β€œmain.ts”.

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

Now, we’re 50% done! And now we make independent modules and use them in our components.

Let’s see how.

Let’s build a simple counter module and wire it in our main β€œapp.component.vue”.

import { VuexModule, Module, getModule, MutationAction } from 'vuex-module-decorators';
import store from '../index';

@Module({
namespaced: true,
name: 'counter',
store: store,
dynamic: true,})
class CounterModule extends VuexModule {
counter : number = 0;

@MutationAction({})
async increment() {
let temp: number = this.counter + 1;
return {counter : temp }
}

@MutationAction({})
async decrement() {
let temp: number = this.counter - 1;
return {counter : temp }
}

get getCounter() {
return this.counter;
}
}
export default getModule(CounterModule);

And the best part about this library is that we can make MutationAction an awesome combination of actions and mutations.

Let me dive into the difference between action and mutation as well:

  • Actions: These are async function which commits or dispatch mutations, also they can run effects(calling API service or other actions).
  • Mutations: These are pure functions that update the state, as the state can be only manipulated using mutations or reducers(for react peeps).

And here, both are combined in a single decorator, though there are separate decorators for actions and mutation.

And for getters, also we require a get function just liked computed functions in Vue + Typescript.

And DONE!! πŸŽ‰

You can build many modules as you want, and good practice is to have different modules for different states, making code more modular.

Now let’s implement our module on a component.

 <template>
<div>
{{getCount}}
<br/>
<button @click="increase">-</button>
<button @click="decrease">+</button>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import Counter from '../store/module/counter'
@Component({})
export default class AppComponent extends Vue {

get getCount() {
return Counter.getCounter;
}

increase() {
Counter.increment();
}

decrease() {
Counter.decrement();
}
}
</script>

You can see, it is so easy to work around with this!

We at Polyrithm build scalable applications on Vue on Typescript and it makes our workflow so much smoother. The power of typescript and flexibility of Vue combined together makes a perfect tool for frontend development, check out our projects on our website.

I hope you find this helpful ❀.

Also, you can check out my previous article Vue + Typescript = πŸ”₯, also I built some stupid projects on Vue + Typescript, you can check them on GitHub account as well. link

Don’t forget to clap and shareΒ :’).

References:Β 

Subscribe To Get Useful Tech & Business Tips

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!