Vuex + xstate

Brock Reece
1 min readSep 17, 2017

--

http://slides.com/davidkhourshid/finite-state-machines#/13

I really enjoyed David Khourshid’s latest talk at React Rally on UI design based around state machines and I started to play around with his xstate project.

It got me thinking that this pattern would fit in very well with Vue and especially Vuex, so I knocked up a couple of quick codepen examples and fired them over to David to check I hadn’t missed the point.

The Vue integration is very straight forward as I built the state machine straight into the data method and it just worked.

Xstate + Vue demo

For the Vuex example, I kept the state machine logic outside of the Vuex store and only track the current state within the store. I think this approach will lend it self very nicely to Vuex modules.

I think David has included these examples in his project’s read me and I am probably going to try it out in anger on my next project and see how I get on.

--

--