In the readme "Other Thoughts" you say "I have found it easiest to place those calls within the actions of my vuex store. From there, it's easy to change the state of your state machine, based on the results of the calls".
I am trying to do exactly that with Axios, for a simple login form - tracking the success/fail of the login action and changing the state and storing session variables.
I can't figure out how to re-target the FSM again, from within the scope of the Axios callbacks, inside the action handler, which is called from a transition, which was called from a Vue method attached to a button.
In LoginPage.vue:
import authStore from './../components/Login/store' ;
import vsm from 'vue-state-machine'
...
created() {
// register store module for Auth FSM in the main vuex store
this.$store.registerModule('AuthenticationFSM', authStore)
this.$vsm.add('AuthenticationFSM', authStore.machine)
this.$vsm.set('AuthenticationFSM')
},
methods: {
loginClicked() {
// Send payload through FSM to store-action: it will turn up in payload.params
this.$vsm.transition('LOGIN_CLICKED', {username:this.username, password:this.password})
This calls the FSM fine, via this transition in store.js
states: {
auth_none: {
on: {
LOGIN_CLICKED: {
auth_validating: {
actions: ['LOGIN_POST']
}
}
}
},
and this also actions fine, calling my API
actions: {
LOGIN_POST(context, payload) {
axios({
method: 'post', url: "...",
data: {username:payload.params.username, password:payload.params.password},
})
.then(response => {
// HOW DO I RE-TARGET THE FSM HERE?
vsm.transition('AUTH_SUCCESS');
})
.catch(function (error) {
vsm.transition('AUTH_FAILURE');
});
},
I tried just re-importing like import vsm from 'vue-state-machine'
to see if the module is a singleton but I get an error vue_state_machine__WEBPACK_IMPORTED_MODULE_1__.default.transition is not a function
so I think I'm not understanding the module loader properly.
So I wondered if you had an example of how you achieved this re-entrancy.
thanks.