Vue Composition API as a State Management

Vue Composition API as a State Management

  • 407

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.

During a Hackathon at Tikal, I managed to research a very nice way to manage an app state, without using any state management library.

To recommend clients about new technologies, It’s best to use them at least once before, and encounter as much as edge cases we can, and find out where does this tech can’t be good enough for them.
The best recommendation is not to say if tech is good, but where it doesn’t.

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:

const state = Vue.observable({
	todos: [{ text: "Learn JavaScript", done: true }, { text: "Learn Vue", done: true } ]
})
export function useTodos() {
	return {
		todos: computed(() => state.todos),
		toggle(todo) => todo.done = !todo.done
	}
}

basic-composition-state.js

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:

export default {
  template: 
  `<ul>
    <li v-for="todo of todos"
        :class="{done: todo.done}"
        @click="toggle(todo)">
          {{todo.text}}
    </li>
  </ul>`,
  setup() {
    return useTodos();
  }
}

vue-component.js

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

https://github.com/tikal-fuseday/service-mesh-fight/tree/master/smf-runner/src/compositions

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.