Encapsulate Logic with Vue 3 Composable
A Vue composable is kind of like a React hook. They allow you to encapsulate your logic and reuse it throughout your applications.
In this lesson, we'll learn how to create a new composable, and use it with both a setup script and the object API.
Instructor: [0:00] Throughout this course, we're going to be using composables. Composables are to Vue what custom hooks are to React. They're a way to contain common logic that can be reused throughout our applications, without the dependency on the Vue layer.
[0:15] This component has a count, the other object, in the Options API. It has a computed method, which is double the count, which just doubles the current count, and has an increment method, which increases the count by one.
[0:27] Let's create a new composable. Like in React, we name our composables with the prefix, use. Our composable is going to export a default function, which itself is going to return an object. That object should have everything that we need from our composable. We're going to need a count, a double count, and an increment.
[0:53] Let's write those functions, so const count is going to be a ref of zero. We're going to need to get ref from Vue, so import ref from Vue. The next thing we're going to need is our increment, so const increment is going to be a function, and it's going to increment the value of our count by one.
[1:15] Lastly, we're going to need our double count. Our double count is a computed value, so we need to import computed from Vue. Computed is a method which takes a function. What do we want to do? We want to take the current value and we want to double it. We have now created a composable. Let's use it.
[1:36] The first thing we'll do is we'll import our composable. Then, to use our composable, we'll do that within our setup function, if we're using the Options API. We'll destructure our count, double count, and our increment from our useCount composable, and then we'll return those same values so that they can be used in our template.
[2:01] We now don't need any of these methods, data, or computed properties. I can now reuse this useCount logic in any component with these simple imports I'm passing through. With the script setup form of writing components, it's even more straightforward.
[2:16] I import my useCount from my composable's useCount, and then I destructure the count, the increment, and the double count from the useCount composable. These are now immediately available to my template.
[2:34] Instead of count++, let's use our increment method. You can see that our count's working. If we wanted to, we could reference our double count as well. Instead of this line, let's have our double count.
[2:51] Composable allows us to group together the logic that we can reuse throughout our application. This reduces the risk of naming collisions that mixins sometimes cause, and it can allow us to safeguard our own reactive data. This means that inside our composable, we can change what's happening, and only expose, making the workings what we're doing, read-only.