Managing State With Vue.observable

When managing a simple to medium application, Vue.observable is the recommended method because it makes your data reactive by using the object returned by the data function. Additionally, it is very easy to manage your state with Vue.observable. There are also other methods aside from Vue.observable, like Vuex and Pinia, that provide a similar solution to manage state; however, Vue.observable is preferable, as it is less complex and less verbose. In this article, we’ll explain what Vue.observable is, and how we can use it to manage our simple store across our application in Vue.js.

Table of Contents

1. A brief intro to Vue.js
2. What is Vue.observable?
3. How does Vue.observable Work?
4. Conclusion

Brief Intro to Vue Js

Vue is a JavaScript-based user interface framework. Its most fundamental part is the view layer. Due to its simple to grasp and approachable framework, Vue enables us to begin building web apps in Vue.js with only a basic familiarity of HTML, CSS, and JavaScript.

What is Vue.observable?

In Vue.js, objects are not automatically reactive. However, Vue.observable is a function that returns a reactive instance of a given object. It makes an object reactive by using the object returned by the data function.

How does Vue.observable Work?

Vue.observable transforms an object into a reactive entity. Vue uses this internally on the object returned by the data function. When changed, the resulting object can be directly utilized inside render functions and calculated properties, and it will trigger necessary modifications.

Let’s have a look at a basic code sample to see how Vue.observable is used to manage small to medium projects. In this example, we will build a simple counter.

Before we begin we will create a file called CounterPage, which will contain all our data.

<template>
  <section id="counter-page">
    <h4 class="result-text">Welcome</h4>
  </section>
</template>

Next, we create a file in the src folder named store.js. This file will contain our store logic.

import Vue from "vue";

export const numberDisplay = Vue.observable({
    count: 0
});

Now we have written our Vue.observable, but the count is not reactive. Let’s check it out. To do this, we will go to our CounterPage and replace the welcome with the count.

<template>
  <section id="counter-page">
    <h4 class="result-text">{{count}}</h4>
  </section>
</template>

For us to see the result of the numbers that are increasing, we will create a computed property, create a data object which will return the number and the current value.

CounterPage.vue

<script>
export default {
  name: "CounterPage",
  
  computed: {
    count(){
      return numberDisplay.count;
    }
  },
};
</script>

In the above code, we are fetching the numbers from our store.js. For this code to work we will import the number from the store into our CounterPage.

CounterPage.vue

<script>
// import data from store
import {numberDisplay} from "../store";
export default {
  name: "CounterPage",
  
  computed: {
    count(){
      return numberDisplay.count;
    }
  },
};
</script>

Now, we have created the number and the result on the browser is 0, but the object is not reactive. For it to be reactive, we will have to create a button that increases and decreases the number when we click on it.

CounterPage.vue

<template>
  <section id="counter-page">
    <div class="counter-section">
     <button @click="decrementCounter()" class="btn">+</button>
      <h4 class="result-text">{{ count }}</h4>
      <button @click="incrementCounter()" class="btn">+</button>
    </div>
  </section>
</template>

<script>
import { numberDisplay, decrementCounter } from "../store";
export default {
  name: "CounterPage",

  computed: {
    count() {
      return numberDisplay.count;
    },
    decrementCounter() {
      return decrementCounter;
    },
  },
  methods:{
    incrementCounter() {
      numberDisplay.count++;
    }
  }
};</script>

Output

The above output is a small application that changes numbers when we click on the increment or decrement button. From this, you can see how easy it is to manage your application with Vue.observable.

Please Note: Vue.observable is preferable when managing your simple to medium applications, because it is less verbose and less complex. Additionally, it enables us to make a reactive object whose modifications can be tracked.

You can check out the full code.

Conclusion

If you’re tired of passing data around with props/events when managing small to medium applications, hopefully, this post will help ease your fatigue and get you started with Vue.observable.