Create a Reactive Color Selector in Vue with useState

[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.