[英]How to assign a function as a value to the property of an object in the Vuex State from a component?
I need help adding a function to the property of an object as a value to the state of my Vuex store.我需要帮助将 function 添加到 object 的属性中,作为我的 Vuex 商店的 state 的值。
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.我目前正在使用 vue.js 和 fullpage.js 重构网站的一些代码我将我的整页选项移动到 vuex 商店,我无法在子组件的选项中向 onLeave 回调添加方法。
I originally had the options in the home component data object and passed a method from the same component.我最初在家庭组件数据 object 中有选项,并从同一组件传递了一个方法。
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.这些选项现在存在于 state 中,我将 fullpage 作为道具从父组件(主页)传递给子组件。 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.如果我通过直接使用
$store.state.fullpage.options.onLeave = function
分配值来对 state 进行更改,那么它在 vue 工具中的工作原理和我预期的一样。
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.当我尝试通过调度一个动作来进行更改时,我得到一个 undefined 分配给 onLeave 的值......我正在从 beforeCreate 生命周期挂钩进行调度。
//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.
谢谢你。
Actions and mutations only take two arguments: the name and the payload.动作和突变只需要两个 arguments:名称和有效负载。 To pass multiple values you can pass an object.
要传递多个值,您可以传递 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.这可以使用object 属性简写如下编写,但它仍然只是 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.在该操作中,您会收到两个 arguments:上下文和有效负载。 Payload can be destructured which looks like object property shorthand in reverse:
有效载荷可以被解构,看起来像 object 属性简写相反:
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)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.