내보낸 모듈 내에서 Vuex mapActions를 사용할 수 있습니까?

내보낸 모듈 내에서 Vuex mapActions를 사용할 수 있습니까?

구성 요소로 가져오는 별도의 모듈에서 Vuex mapActions를 호출할 수 있습니까?

저는 vue.js 웹 앱에서 일련의 기능을 표준화하려고 합니다.각 구성 요소에 가져오기를 하고 몇 가지 값을 전달하여 기능을 작동시키고 싶습니다.vuex를 사용하여 상태를 관리하고 있습니다.현재 각 구성 요소는 로드될 때마다 이러한 기능을 호출합니다(동일하게 동일).

저는 이것을 하나의 모듈로 리팩터링하고 필요에 따라 각 구성요소로 가져오고 싶습니다.이 코드는 mapActions를 함수의 일부로 사용합니다.다음은 구성 요소, 모듈, vuex 작업과 관련된 코드입니다.

Vue 구성 요소:

//the imported function call
if (!this.queued){
   timer.updatePage(this.pagination, this.orders);
}

모듈 코드(802.js):

import { mapActions } from 'vuex';

let currentComp = {
   name: 'purchase',
   date: null,
   start: false
}

const timer = {
   ...mapActions(['currentComponent']),
   updatePage(pagination, order) {
      currentComp.name = 'nextComponent';
      this.currentComponent(currentComp);
   }
}
export default timer;

vuex 코드:

//in the actions section:
currentComponent({
        commit
    }, comp) {
        console.log(comp);
        commit('setCurrentComponent', comp);
}

//in the mutations section:
setCurrentComponent: (state, comp) => {
        state.currentComponent = comp.name;
        return state;
    }

구성 요소가 가져온 기능을 실행하면 다음과 같이 표시됩니다.

vuex.esm.js?2f62:870 Uncaught TypeError: Cannot read property 'dispatch' of undefined
    at Object.mappedAction [as currentComponent] (vuex.esm.js?2f62:870)
    at eval (advance.js?935c:37)

이 항목에서 이 항목을 제거할 때.currentComponent i get:

advance.js?935c:37 Uncaught ReferenceError: currentComponent is not defined
    at eval (advance.js?935c:37)

미리 안내해 주셔서 감사합니다.

mapActions다음과 같은 모양의 메서드를 만들기 위한 바로 가기입니다.

currentComponent() {
   this.$store.dispatch('xxx')
}

이 함수를 호출할 때,this문맥은timer.부터timer를 가지고 있지 않습니다.$store속성, 오류가 발생합니다.Cannot read property 'dispatch' of undefined이것을 피하는 가장 빠른 방법은 그것을 바꾸는 것입니다.this를 가진 구성 요소에 대한 컨텍스트$store소유물.구성 요소를 세 번째 속성으로 전달하여 이 작업을 수행할 수 있습니다.updatePage구속력이 있는currentComponent함수에 대하여

// component code
timer.updatePage(this.pagination, this.orders, this);

// advance.js
const timer = {
   ...mapActions(['currentComponent']),
   updatePage(pagination, order, component) {
      currentComp.name = 'nextComponent';
      this.currentComponent.bind(component)(currentComp);
   }
}

하지만 이런 유형의 행동에는 믹스인을 사용하는 것이 좋습니다.

import { mapActions } from 'vuex';

let currentComp = {
   name: 'purchase',
   date: null,
   start: false
}

const timerMixin = {
   methods: {
       ...mapActions(['currentComponent']),
       updatePage(pagination, order) {
          currentComp.name = 'nextComponent';
          this.currentComponent(currentComp);
       }
   }
}
export default timerMixin;

구성 요소에서 타이머 Mixin을 가져와 Mixin으로 등록합니다.그런 다음 이러한 메소드를 구성 요소에서 직접 사용할 수 있으며 기존 코드를 약간 수정하여 호출할 수 있습니다.

if (!this.queued){
   this.updatePage(this.pagination, this.orders);
}

언급URL : https://stackoverflow.com/questions/56584963/is-it-possible-to-use-vuex-mapactions-inside-an-exported-module