Sharing composable state in Vue apps

#vue #typescript #javascript #tutorial

When I started my web development career with Vue, back then we were using Vue 2 and Vuex to implement a global state management tool. I liked this approach because it allowed to create reactive values globally in apps that are easily accessible and that could be modified when needed.

However, right now you could achieve something similar by using the composables and have a global state there. This approach is more like Vue 3 compatible with the usage of composables, script setup, and other DX utils that come natively with the framework.

In this article, I want to introduce you to the concept that I am using both in my work and hobby projects.

Enjoy!

🟢 Sharing composable state in Vue apps

Normally, when we create a composable, we usually do it like the following:

import { ref } from 'vue'

export const useWishlist = () => {
  const wishlist = ref({})

  const addToWishlist = (key, value) => {
    wishlist.value[key] = value
  }

  return {
    wishlist,
    addToWishlist,
  }
}

First, we create a new composable function
Next, we create a reactive ref variable that will store the state
Furthermore, we create a funtion that modifies the state.
And finally, we return all this as a part of the composable.

This approach certainly works but each call of the useWishlist composable will generate a new wishlist variable.

Sometimes, we may want to have a global reactive property that would be responsible for storing the state of the customer's wishlist. How do we do that then?

The only small different that we need to do here to achieve that is to move registration of wishlist variable, outside of the useWishlist composable like following:

import { ref } from 'vue'

const wishlist = ref({})

export const useWishlist = () => {
  const addToWishlist = (key, value) => {
    wishlist.value[key] = value
  }

  return {
    wishlist,
    addToWishlist,
  }
}

This way, whenever we access the useWishlist composable, the value of wishlist will be the same globally. Thanks to this approach we can trigger addToWishlist method from multiple places in the application and have the wishlist variable being updated automatically.

If you would like to learn more about composables, check out the official docs here.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below: