How to assign a function as a value to the property of an object in the Vuex State from a component?

Question

I need help adding a function to the property of an object as a value to the state of my Vuex store.

I am currently refactoring some code for a site using vue.js and fullpage.js I moved my fullpage options to the vuex store and I am having trouble adding a method to the onLeave callback in my options from a child component.

I originally had the options in the home component data object and passed a method from the same component.

data{
  return {
    options:{
      onLeave: this.morphScroll
    }
  }
},
methods: {
   morphScroll(origin, destination, direction){
     //do something
   }
}

The options now exist in the state and I am passing fullpage as a prop from the parent component (home) to the child component. If I make a change to the state by assigning the value directly using $store.state.fullpage.options.onLeave = function then it works as expected and I see the value assigned in the vue dev tools.

When I try and make a change by dispatching an action instead I get a value of undefined assigned to onLeave... I am dispatching from the beforeCreate lifecycle hook.

//Action dispatched
this.$store.dispatch('newFullPageOption', 'onLeave', onLeaveCallback)

 //Mutation to set the state
//where would be 'onLeave', val would be the function being passed
setNewFullpageOption(state, where, val){
  Vue.set(state.fullpage.options, where, val)
}

//My action
newFullPageOption(context, where, val){
    context.commit('setNewFullpageOption', where, val )
}
    
//Function I am passing to onLeave option
//It is being passed in the beforeCreate() lifecycle hook
const onLeaveCallback = (origin, destination, direction) => { 
if( origin.index == 0 && direction == 'down') {
  this.morphSVG.direction = 'normal'
  this.morphSVG.play()
  this.fpzindex = false
  console.log('scroll down destination:', destination.index)
}
if( origin.index == 1 && direction == 'up') {
  this.morphSVG.direction = 'reverse'
  this.morphSVG.play()
  this.fphidden = true
    console.log('scroll up destination:', destination.index)
  }
  console.log('data from component:', this.testdata)
}

//this.$store.dispatch('newFullPageOption', 'onLeave', onLeaveCallback)
this.$store.state.fullpage.options.onLeave = onLeaveCallback

Any help is appreciated. Thank you.

Answer 1

Actions and mutations only take two arguments: the name and the payload. To pass multiple values you can pass an object.

this.$store.dispatch('newFullPageOption', {
   onLeave: 'onLeave',
   onLeaveCallback: onLeaveCallback
})

This can be written as follows using object property shorthand but it's still just 2 arguments. The property names have to match an existing variable with the same name:

const onLeave = 'onLeave';
this.$store.dispatch('newFullPageOption', { onleave, onLeaveCallback })

In the action, you receive two arguments: context and payload. Payload can be destructured which looks like object property shorthand in reverse:

NewFullpageOption(context, { onLeave, onLeaveCallback }){ // Destructuring
  // Mutations only take two arguments too:
  context.commit('setNewFullpageOption', { onLeave, onLeaveCallback })
}

Mutations use the same two-argument format:

setNewFullpageOption(state, { onLeave, onLeaveCallback }){
   Vue.set(state.fullpage.options, onLeave, onLeaveCallback)
}