Should You Use Composition API as a Replacement for Vuex?

Should You Use Composition API as a Replacement for Vuex?

In this article, I'll show you how you can replace Vuex with features of the Composition API, and also make the case for whether this is a wise idea or not.

Global reactive state with Composition API

The main reason Vuex exists is to allow global reactive state in a Vue app. Without it, you could only share local component state via the component interface i.e. props/events. Passing props and events from a component four of five layers deep is a type of drudgery all too familiar to Vue users.

However, the Composition API (packaged with Vue 3) allows you to create independent reactive variables outside of a component (and, in fact, outside of a Vue app). You can, for example, create a module file exporting reactive variables and import this into any component where you want to use it.

DIY Vuex with Composition API

Let's see how we can roll our own Vuex using the Composition API. Firstly, we'll create a file to declare and export global state variables.

Let's use the reactive method to create a state object with a value count, assuming we want to use this count value throughout the app.

src/global.js

import { reactive } from "vue";

const state = reactive({
  count: 0
});

export default { state };

vue.js composition api vuex vue

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Q&A | Build a CRUD client with Vue.js + Composition API

The composition API is a new and optional way of creating and organizing components in a Vue 3 application. The Composition API allows reactive component logic to be defined more intuitively by allowing all the code for a specific feature (search, for example), to be grouped together. Using the Vue composition API will make your application more scalable and reusable between several components. In this article, we will build a simple Crud application using the composition API. let’s start by creating a simple vue js application.

Easily switch to Composition API in Vue.js 3

A step by step guide on how to migrate a Vue.js component from the traditional Object API to the modern Composition API, easy and in a cheatsheet format. The idea is to give you some tips related to new features you can find on Vue.js 3 as they get available. For now, we'll focus on Composition API, one of the most game-changing features!

Create a i18n Plugin with Composition API in Vue.js 3

A example on how to use the inject and provide functions to create a i18n plugin using Composition API in Vue.js 3. The way plugins are coded in Vue.js 3 with Composition API differ from traditional plugins. Traditional are used via a install function and added using Vue.use(plugin). They usually manipulate/extend the Vue prototype.

Access template refs in Composition API in Vue.js 3

Quick tip on how to access the old this.$refs by using ref() in the new Composition API in Vue.js 3 components. You've seen in the last tip "Use old instance properties in Composition API in Vue.js 3" how to access instance properties in the new syntax. However, our beloved this.$refs wasn't included in the setup context object as you realized if you read the tip.

Use old instance properties in Composition API in Vue.js 3

Learn how to use this.$emit, this.$attrs and more in the new Composition API, where you have no this instance in your Vue.js Components. However, that's not all. What happens with all instance properties we used to have, such as this.$emit, this.$slots, this.$attrs and so? They were on the this component instance, but there is no this in Composition API.