What is a state?

You can define a state with many different technologies and use it with many different cases of paradigms.. redux, mobx, vuex, rx, but in the end, it’s just a way to look at global plain objects as if we’re in 1995, but we need to complicate it because we’re at 2020.

Why not Vuex?

I really like Vuex, but you have to admit that for most cases it’s just too much.

1. After several modules, it looks like you copy-pasted everything.

2. Abuse of mechanism to do simple modifications to objects.

3. So much code at the end, and too many abstractions.

4. Those yelling const names for actions, getters, etc.

Vue.observable() to the rescue

The Vue.observable() method is a wrapper to get a reactive object, that you can watch its changes inside (or outside) a component, and act accordingly.

As simple as that, just create your reactive object, and put it everywhere you like — it’s your global state. woohaa!

yes. you can share it with other components.

But wait, what about the Composition API?

Well, you’re right. You need to use reactive() or computed() functions inside the setup() method, in order to create the magic (you can’t use them globally once!), so a composition file can look something like:

yes. updating the vue.observable object will affect the computed / reactive results.

Now, you can use the useTodos() function inside the setup method, like that:

This compositions folder has 3 different cases of using composition as a state:

It’s very simple!

Notice that I only use reactive and computed, etc, only when the function called (from the setup method), and not when the file has loaded — because it won’t work there.

Who am I?

I am David Meir-Levy, a fullstack javascript developer, and the creator of Greenpress.