This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.

Check out a free preview of the full State Machines in JavaScript with XState course:
The "XState React Hooks & Vue Hooks" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David explains that, similar to React, Vue has specific hooks that allow the use of XState with the framework. Vue provides the useMachine hook, which needs to be added to an object named setup that returns the two reactive values state and send.

Get Unlimited Access Now

Transcript from the "XState React Hooks & Vue Hooks" Lesson

>> We talked about reacts, we have hooks for reacts, which is available in the exstate/react package over here. We have that use machine hook like we talked about, and interestingly enough, with view there are also hooks for view. So if we look in packages exstate view, we're going to see that view actually has a very similar setup to react with the new composition API.

[00:00:31] So with view, you're provided the use machine hook, and in that hook, remember, it's a little bit different than react and that you have to put it in setup in that default object that you send back. And so, that's going to return the state and send both of which are reactive values.

[00:00:52] And then you could use that in your view project as if you would use any other value. The state is going to update whenever any state update, whether it's the context or the finite state value or both changes and the send, never changes but it allows you to reactively send events to that machine that's defined or not defined, but that's used in your components.

[00:01:16] And so that's how I was able to make the exstate view, minute machine without much effort, because the machine definition is already there, all I have to do is plug that into view, and it is guaranteed to work the exact same way.