Polyrithm
Published in

Polyrithm

Vuex on Typescript 💉

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.

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.

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 component “app.component.vue”.

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.

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:

--

--

--

Polyrithm Technologies is an Australian Software and Internet of Things company that specialises in working closely with businesses to help them reach new heights by harnessing the benefits of technology and automation

Recommended from Medium

React: render optimization for Material UI collapsible list using Hooks and Memo.

What is Playwright? Cross-browser automation library for end-to-end testing

Quick and to the Point: stopPropagation()

Slick Clojure Editor Setup with Atom

What is THIS? No, seriously, THIS keyword.

Up your DOM manipulation game through these Exercises-Part 01 📚

Goat Logs: Jan 28th 2022

Getting Started With Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lakshya Khera

Lakshya Khera

I'm a computer science student, in persue of happiness and greatest. :)

More from Medium

Cache Website Assets in “Offline Mode”

.map(), .filter() and .reduce() in JavaScript

5 Vue.js benefits that every developer should be aware of!

Which Framework to use :Angular vs React vs Vue