Can someone assist me with incorporating a function into the property of an object as a value for the state in my Vuex store?
I am currently restructuring some code for a website using vue.js and fullpage.js. I have moved my fullpage options to the vuex store, but I am facing difficulties adding a method to the onLeave callback in my options from a child component.
Initially, I had the options stored in the data object of the home component and passed a method from the same component.
data{
return {
options:{
onLeave: this.morphScroll
}
}
},
methods: {
morphScroll(origin, destination, direction){
//do something
}
}
The options now reside in the state, and I pass fullpage as a prop from the parent component (home) to the child component. If I directly assign the value by changing the state using
$store.state.fullpage.options.onLeave = functionHowever, when I attempt to make a change by dispatching an action instead, I end up with a value of undefined being assigned to onLeave... This occurs when 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
Your assistance is highly appreciated. Thank you!