In this lesson I go over the basics of StimulusJS with a simple Counter example. I show how state in Stimulus actually lives in your HTML and how to bind functionality from your controller to your html with data attributes. I also demonstrate how to use actions to update the state and getters and setters to clean up the controller.

https://stimulusjs.org/handbook/origin

https://app.egghead.io/api/v1/lessons/javascript-update-stimulusjs-state-with-actions-getters-and-setters/subtitles

Update StimulusJS State with Actions, Getters, and Setters

Instructor: [00:00] I have a simple counter example that's not quite hooked up yet. If I hit increment or decrement, it doesn't do anything, but I do have HTML over to the left here and the start of some JavaScript over here on the right.

[00:12] I'm using the Stimulus UMD build for this example. However, the stimulus docs have the instructions on how to build with Webpack. The UMD version adds Stimulus as a global, and we have to do a few extra steps to get things going.

[00:24] With Stimulus, you use normal HTML to mark up your UI, and then you bind functionality to it. You do this by adding data properties to your HTML. The first one we'll add is the controller property. Each Stimulus controller has a name and ties to a JavaScript class that provides functionality.

[00:43] The first thing that we're going to need to do in our controller is add some targets. We do this by declaring static targets, and this is going to be an array. These targets basically match DOM elements, so it's how our controller talks to the DOM. We'll call the first one output.

[00:59] The next thing that we'll need to do is tie our output to our HTML. We'll do this in our H1 here and call this data target, and we call it counter output, so controller name, target name. In Stimulus, your actual state lives in the HTML. This is much different compared to most JavaScript libraries where state is held in JavaScript.

[01:23] We'll do this by adding another data attribute. Next, let's hook up our state to our output. This can be done in an initialization callback, which is invoked when the controller's first instantiated. The way we talk to the targeted HTML is by specifying the name output target as camelCase and assign a value to it. We retrieve our state by using the data get method that comes baked into Stimulus.

[01:49] Next, let's ask some of the event handlers to increment and decrement. We'll do this by adding some methods to our class, one called increment and the other called decrement. We'll assign these handlers to our HTML as actions. We also do that with the data attribute. The action begins with the controller name, which is Counter, followed by a #, and then the name of the method we want to invoke.

[02:14] Now to connect our actions to our methods in JavaScript. We can do this by using the baked-in data set method and referencing our data name, which is Count, and giving it a new value. Now that the counter is working we can clean up the controller a bit by utilizing getters and setters and delegating to the data get and set methods.

[02:38] We create a Count property that holds the value of our state. When an action is invoked, the setter automatically calls the data set method, and the output of the new state is rendered.

Update StimulusJS State with Actions, Getters, and Setters

Share this video with your friends