Mon Oct 15, 2018 · 637 words

Its has been a while since my first post

I’ve to commit that Im kinda lazy lately

Okay..Enough trash talk So I’ve bee working with VueJs for a while which is very cool. But the more I work with VueJs, the more I realize that I need a “state management system” cause everytime I break down the components and add actions into them…It become really messy

So I decided to learn VueX

And for me, the best way of learning something is to build something else using things that you want to learn. So, I build a simple todo-app with VueJs and Vuex.Hooray…

Init (2018-10-15)

So I built a very simple app with VueJs DONE

Here the screenshot of source code

What I’ve learned:

Vuex seems nice, it makes the workflow looks better and the whole app’s data more consistency.
It makes source codes WAY more complex and harder to understand for sure. But still I have to commit that it will reduces the whole this.$parent.$emit things which I did a lot in the past (which I hate so much)
…(to be continued)

What I’ve realized:

The source code is okay, I think. But it only for tiny apps which has only 1-2 sorts of data (items in todo for example) As you can see above image, imagine we have 10 kinds of state. Each kind has 2-3 methods… Okay im quit.. So what im gonna do next is to make sure the doom day is not gonna happen.. by splitting the current store/index.js out.

Ref: http://chibinowa.net/note/vuejs/vue-14.html

Vuex Modules (2018-10-27)

Luckily for me, Vuex actually has a nicely way to deal with my problem Vuex Modules So as the document said

To help with that, Vuex allows us to divide our store into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules

So first thing I need to do is just split todo-item into store/modules/todoItem.js and then move all the code inside store inside it.

Which looks like this: And the main component with items will looked like this

Let’s check again to see if it still work! … It’s work perfectly the same way.OK for now.

But the code is…smell.Why ? Because let think about when we need to deals with the filter datas, you have to deal with it like this all the time? I think I need to figure out the better way to do it.

I’ll comeback soon to deal with this.

Vuex Getters

Imagine when you have lots of components, and each one of them would use the filtered list of items. With the style I’ve done, I have to repeat in every single components, which I dont really want to. So, How would I avoid this.

The concept of vuex getters is created for exact same purpose

Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. Like computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.

So I re-write my code base on this. How would it be?

First, the todoItem.js. Add this getters block

And then the usage

Damn, this looks so much better, right? And I think this is the right way to do it. Because till now this app using static data, but in real life, we need to get data from API right? So I think getters is the right place to do it.

Will comeback and do the server side later. For now I will check out all the vuex documents and see if I could do my app any better.

Better way of writing store modules

Ref: https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/store/modules/cart.js

I’ve put all the source code todo-vuex Let finish this here and do something more interesting.