Create a Reactive Color Selector in Vue with useState

Alvaro Saburido
InstructorAlvaro Saburido
Share this video with your friends

Social Share Links

Send Tweet
Published 6 months ago
Updated a week ago

In this lesson, you'll learn how to create a reactive color selector in Vue using the useState composable function. We'll cover:

  • Creating a shared state that contains base colors and a selected base color
  • Using the toRefs utility to convert reactive properties to refs
  • Importing and using the useState composable in components
  • Iterating through colors to create buttons
  • Assigning click event handlers to update the selected color reactively

[00:00] Now that we successfully load our model into a scene, it's time to make it interactive with the UI controls. If you notice, if now, if you change the colors, there is no change on the materials of the model. That's because the base color dot view component have the colors hard [00:19] coded. So what we are gonna do in this lesson is just basically create a state to be able to share the component between the view, UI control, and the model itself. So to do that, we are gonna go to the source, and we're gonna create a new folder called composites. [00:40] Inside of this folder, we're gonna create a new file called state dot ts. And inside of here, we're gonna import reactive from view. So what we're gonna create is a local state. [01:00] To do that, we're gonna create a function. So this is gonna be our composable. It's called use state. And this is gonna return some. It's gonna return a state. So we can create the state by using a reactive [01:21] object. And instead of this reactive object, we are going to take these 2 parameters. So this is gonna be the base color and the selected base color. So we're going to copy the color right here into the [01:40] state to pick the selected color. And this array right here of the available colors for the base, like this. We're missing a comma here, and then we're gonna return the state here. But instead of returning [02:00] the reactive object, what we are gonna do is use a utility from view called torefs. So what this is gonna do is gonna take all the properties inside of the reactive, and it's gonna convert it into refs. So what we're gonna do here is torefs, [02:20] and we are gonna spread it, and we're gonna pass the state here. Next step is to connect the UI controls of the base colors with our state. So we're gonna go to base color dot view, and we're gonna remove all the hard coded colors [02:40] inside of the component. Now let's import the compostables. So use a state from composables state. Then we're gonna deconstruct the properties that we need, which is the base colors array and the selected base color. [03:00] Equal use state, and we call the function. To make sure we're receiving what we need, let's do a console log of the base colors and the selected base color. Now let's check the console log in our browser. So if we go here [03:20] to the developer tools in the console, we're gonna see the prompt for the object containing 2 refs. The base color array, which contain all the available, colors, and the selected base, ref for the current selected one. To observe better what is gonna happen when we change color, let's use the [03:40] view developer tools. So if we select the base color component here and we expect it, we're gonna see that it has the base color array and the selected color right here. So take a good look here while I change the colors. If you change here, you're gonna notice that the ref of the selected base color is changing. [04:00] This is because in the code, we have made a iteration through all the base colors and then create some buttons with it. We are gonna assign an event handler, for click event on the buttons, and we are going to set the color to the selected base color. [04:19] Next step is to repeat the exactly same procedure but with the cushion colors UI control. So we're going to copy this color for here into our state in a similar fashion as we did with the base color. So here we have all available colors in an array for the cushion as well as the current selected color. [04:40] So let's hit save, and let's refactor the cushion colors to use the state as well. So we're gonna import the use state from the composables, and then we're gonna deconstruct the, cushion colors and the selected cushion color [05:00] Equal to use state. Let's quickly check it on our view dev tools. So if we select the cushion colors, we're gonna have the state right here. And if we change it, we're gonna notice that the select equation color is also changing.

egghead
egghead
~ 17 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today