어떻게 개체의 Vuex 주에 있는이 그 부동산에 대한 구성 요소에서 가치를 할당할?

어떻게 개체의 Vuex 주에 있는이 그 부동산에 대한 구성 요소에서 가치를 할당할?

나는 개체의 속성에 내 Vuex 가게의 상태에 값이 기능 추가 도움이 필요합니다.

나는 현재 사이트 vue.js과fullpage.js 나는 vuex 가게에 내fullpage 옵션 와서 나는onLeave 콜백에 내 처지에서 아이를 구성 요소에서 메서드를 추가하는 안 좋아요 몇가지 코드 refactoring 있다.

나는 원래 집 구성 요소 데이터 개체로 살고 같은 구성 요소에서 법을 통과한 선택 사항이 있다.

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

그 옵션이 현재 국가에서 부모 구성 요소(집)에서 받침으로 아이 구성 요소에fullpage 전달하고 있다.만약 내가 직접을 사용하여 값은 상태에 변화를 만든다.$store.state.fullpage.options.onLeave = function저는 이 값이 vue dev 도구에 할당된 보는 것으로 예상되서 일한다.

내가 액션 파견에 의한 변화. 입어 보는 대신 나는 정의되지 않음의 값을 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

어떤 도움에 감사 드립니다.감사합니다.

조치와 돌연변이만:두 주장은 이름과 페이 로드한다.당신은 개체를 전달할 수 있는 여러 가치를 통과하기 위해.

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

으로 개체 속성 속기 다음 이 하지만 여전히 2인수 작성할 수 있다.속성 이름이 같은 이름으로 기존 변수에 맞춰 갖게 된다.

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

액션에서, 여러분은 두가지 논쟁:컨텍스트와 페이 로드를 받는다.Payload는 개체 속성 속기는 위아래가 뒤바뀐 모양입니다. destructured 수 있다.

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

이러한: 같은two-argument 형식을 사용합니다.

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

참조URL:https://stackoverflow.com/questions/65046448/how-to-assign-a-function-as-a-value-to-the-property-of-an-object-in-the-vuex-sta