DEV Community

Discussion on: Replacing Vuex with XState

Collapse
 
danroc profile image
Daniel da Rocha

Thanks for this Felix. I went on a similar path to you: after getting excited about all the possibilities of xstate, I started using it with Vuex as written by Parker. But I also felt things were still a bit messy and verbose, while some of the guides on xstate's docs show a much nicer implementation.

I was messing around with Nuxt plugins in my case and will give your approach a try. xstate shows so much potential and I can't wait until Vue3 comes out and we can use @xstate/vue with it!

Collapse
 
felix profile image
Felix Guerin

Yes! Vue 3 will definitely make things easier. What Nuxt plugins did you try?

Collapse
 
danroc profile image
Daniel da Rocha

I was actually trying to use apollo to fetch data in my machines and for that I needed to reference the app somehow. So I figured I'd do it within a plugin file, so that I could access app:

// fetchMachine plugin
const fetchMachine = (app) => {
  return Machine({
      // ...
  })
}

export default ({ app }, inject) => {
  inject('fetchMachine', fetchMachine(app))
}
// my-component.vue
<script>
import { interpret } from 'xstate'
export default {
  data() {
    return {
      fetchService: interpret(this.$fetchMachine),
      current: this.$fetchMachine.initialState
    }
  },
  // ...
  created() {
    this.fetchService.onTransition((state) => (this.current = state)).start()
  },
  methods: {
    send(event) {
      this.fetchService.send(event)
    },
    matches(value) {
      return this.current.matches(value)
    }
  }
}

The component part above is taken from the xstate docs, the Vue implementation of their reddit API machine.

But this is very specific to one machine, and that's why I like your method because I can create machines on the fly as needed...

Thread Thread
 
felix profile image
Felix Guerin

I hadn't seen that. I'll definitely look at it. Making the machines available throughout the whole app as plugins is a really good idea. No need to import it every time.

Thread Thread
 
felix profile image
Felix Guerin

Hey Daniel, I just published a Vue plugin to facilitate the setup outlined in the post. The link is in the edit at the end if you're interested!

Thread Thread
 
danroc profile image
Daniel da Rocha

that's really cool Felix! It makes life easier and hopefully inspires othe people to try xstate and fsm in their projects!