Modern State Management with Vue 3

Rate this content
Bookmark

The Vue 3 Reactivity and Composition API offers developers flexible techniques to work with reactive data. They enable a new and modern approach to handling State Management. Developers can now effortlessly implement local and global stores. Vuex has been one of the most used First-party plugins for Vue 2. Let's have a look at the advantages and tradeoffs of using Composables instead of Vuex.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Vanessa is responsible for the front end at Cevy and co-hosts two podcasts: Expect Exception and Working Draft.

Vue 3 is a modern JavaScript framework used for building user interfaces. It introduces the Composition API, which allows developers to encapsulate logical units and manage state more effectively.

The key APIs in Vue 3 are the Options API, Reactivity API, and Composition API. These APIs provide various functionalities for building and managing components and state in Vue applications.

The Composition API in Vue 3 allows developers to encapsulate logical units within a setup function, providing a more modular and maintainable approach to building Vue components.

Yes, you can use Vue 3 without the Options API and Vuex by leveraging the Composition API, which provides powerful tools for managing state and logic within components.

In Vue 3, ref is used to create a reactive reference to a value, while reactive is used to create a reactive object. Developers can choose between them based on their preference and the specific requirements of their application.

The Composition API allows developers to group related logic together, making the code more modular and easier to maintain. This is achieved by encapsulating related functionalities within composable functions.

Composables are reusable functions that encapsulate related logic and state using the Composition API. They can be used across different components to share functionality.

State management in Vue 3 can be achieved using composables, which allow developers to create and manage global state using reactive references and computed properties.

The provide and inject pattern in Vue allows parent components to provide values that can be injected into child components, enabling a way to share state and dependencies across components without prop drilling.

Vanessa Otto
Vanessa Otto
22 min
21 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Vanessa introduces Vue Free and discusses the benefits of using the Composition API. The order of execution and grouping logical units using the Composition API is explained. The Composition API is used for state management and refactoring components. The speaker shares their initial experience with state management using Vuex. Composables are explored as an alternative for state management in Vue 3.

1. Introduction to Vue Free and the Composition API

Short description:

In this part, Vanessa introduces Vue Free, a powerful state management solution for Vue applications. She shares her journey of using Vue Free without Options API and Vuex, leveraging the Composition API instead. Vanessa explains the benefits of the Composition API and how it can be used in small applications. She also discusses the three APIs in Vue: options API, reactivity API, and composition API, highlighting the advantages of the composition API. Finally, she provides a recap of writing a component in Vue 2 or Vue 3 using the options API.

Hi, now we are going to talk about modern state management with Vue Free.

Hi, I'm Vanessa. You can find me online as Vanze. I'm responsible for the front end at Cevy. I'm co-host of two different podcasts, Expect Exception, where we talk about front-end testing and Working Draft, a German podcast about web development. And roughly a year ago, in September, 2020, I can remember as I sat there watching Avenu on the Vue JS conference, finally saying, hey, Vue Free is out there, and now I want you to go with me on the journey, how I installed Vue Free and used alternative concepts to use Vue Free completely without Options API and also without VueX. I do not suggest that you should use Vue Free without Options API or replace VueX. I want to tell you that the Composition API is so powerful that we actually can use Vue without both of those tools, and it made sense for me in a state where I had a really small application which I started with Vue Free from scratch and did not have to migrate from my Vue2 application.

In the code examples I will show in the next couple of minutes, I will use the set up function and I prefer to use ref over reactive. But everything I will show now you of course can use the script setup syntactic sugar instead and you can choose to use reactive instead of ref if you prefer to.

As my components of my very small Vue Free application roughly a year ago started to grow because I had some more complex problems which needed some more complex solutions, I and therefore also this talk were mainly inspired by those three articles. Group, extract share pattern, state management with composition API, and should you use composition API as a replacement for Vuex.

Let's focus on three of the Vue's APIs for now, the options API, reactivity API, and composition API. The options API, we can think of this object structure that we know from your two single file applications, single file components, where we have our data computed, methods, watch mounted, and many more. And the reactivity API is not that different of that. We have refReactive for reactive data computed, watch, watch effect, unmounted, and many more. But the clue is that I can now import those functions directly from Vue. I don't have to use a Vue single file component or a Mixon to use those tools. I can import them in any JavaScript or TypeScript file. And then the composition API is providing us with a setup function where I can bring all the magic together and use all of those powerful tools of the Reactivity API in my Vue component.

So let's have a recap of how to write a component in Vue 2 or in Vue 3 using the options. Here I have a template with a paragraph with greeting and full name. If I scroll down to my script block, I can see here that I have a data function, which is a turning an object with greeting and hello. I have properties for first name and last name. And I have a computed property for the full name, which is returning me a first name with a spice and the last name. So this is one component with just one purpose, which is doing its job quite well. Kind of a funny side note is that I initialized this greeting here as a reactive data attribute, although I actually don't ever change it and won't need this observers on it anyway. But I was never sure where to put this constants using the options API. The problem I now want to focus on is that logical units, if the component is growing and growing, are spread over the whole script block. So what do I mean with this? I've prepared this code sandbox here, and here we can see as well we have our greeting and full name to say hello to the user.

2. Order of Execution and Grouping Logical Units

Short description:

This part focuses on the order of how things are happening in the script block. It explains how the composition API enables developers to group logical units together in a single file or share them with others. The speaker shares their experience with the composition API and how it can be used without sharing functionality. They provide an example of a reimplementation of the greeting using the composition API, highlighting the simplicity and power of using JavaScript directly.

But then we also displayed the user's items where we loop over and also provide a delete item function to delete something. If I scroll down to the script block, I now want you to focus on the order of how things are happening. I have the data function which is running an object with the greeting and items. The properties having stuff from the greeting. A computed property with a full name of the greeting. Then a method with the function delete item of the items. The categories bind to the way that the view skeleton, the view object here is structured.

Everything in data is in data. Every computed property is in computed property. Every function is in the methods block. Now we have a point where we have now greeting items, greeting, greeting items. They are shattered over the whole file. This is kind of, it grows and grows and grows, looking like this. Of course it can be a solution to split the component, but let's focus on it doesn't work anymore, we can't split any further, and we still have this lines of code not really bind together and what the composition API is providing us with is a possibility to group logical units together again, so that everything is related to the greeting, we can imagine being in this light blue box on the top and everything related to the items we can imagine to be bind together in this darkish blue, almost black box here. So the composition API enables developers to encapsulate logical units in one single file or in shared with others.

What I mean with that as I learned about the composition API a year ago, it always was sold to me as this is the go to thing instead of mixing. Use the composition API to share functionality. It's really powerful. But then I started with U3, I thought, but do we really need to share logic to use the composition API? Because I really like how it works the composition API, and I actually like to use it also without sharing functionality. And this is exactly what we will do now. So I have created some Hello World files on this view single file component playground. And the first one is a reimplementation of the just the greeting stuff we saw beforehand in U3 composition API. So here we have a template with the greeting and full name. And we import computed from view. If I scroll down to the properties, I see the first name and the last name. And here below I have the setup function, which is giving me a constants greeting with Hello, and a full name with as a computed property, and then I return everything to give it over to my template. What is kind of cool is that it's just JavaScript, right? It feels good to me. Actually, it felt a bit sweat like the first time I see it, the first time I saw it. So here we have the cons greeting. It's just a pure cons without wrapping it in a data object, not using a created lifecycle hooked to initialized constants.