Vue/Vuex를 사용하여 호출을 올바르게 주문하는 방법

Vue/Vuex를 사용하여 호출을 올바르게 주문하는 방법

아래에 스켈레톤 코드가 있는데, 이것은 내가 올바른 통화 순서를 강요하는 것과 관련된 문제를 보여준다.내가 원하는 순서는:

• 사용자가 Foo.vue의 someLocalMethod()를 트리거한다.
  • 깃발은 바에게 변화가 일어났음을 인식하도록 설정되어 있다.
• 깃발은 바를 촉발할 것이다.Vue의 감시자가 일을 좀 해 보라고 했어.
  • 작업이 완료되면 플래그가 해제된다.
• Foo.vue의 일부 LocalMethod()는 국기가 설정되지 않았다는 것을 알게 되고 작업을 계속할 것이다.

Bar와 Foo 모두 스토어를 바꾸는 일을 하고 있기 때문에 (두 파일 사이에 플래그로만 사용하는 대신) 파일이 연관되어 있다는 점을 언급해야겠다.

내가 하고 있는 일에 접근하는 데 훨씬 더 좋고 깨끗한 방법이 있을 거라고 생각하지만, 나는 그것에 대해 딱 꼬집어 말할 수 없다.코드는 아래와 같다.

바뷰

computed: {
  ...mapGetters('store', ['getSomeFlag']),
},
methods: {
  ...mapMutations('store', ['setSomeFlag']),
},
watch: {
  getSomeFlag(newValue) {
    if (newValue === true) {
      console.log('Flag is set. Going to do work');
      doWorkRelevantToBarPage();
      setSomeFlag(false);
    }
  }
}

푸뷰

methods: {
  ...mapActions('store', ['someStoreCall']),
  ...mapMutations('store', ['setSomeFlag']),

  someLocalMethod(someData) {
    this.setSomeFlag(true);
    // somehow wait until Bar.vue's watcher becomes aware of it and completes it's own work
    this.someStoreCall(someData);      
  }
},

store.js.

state: {
  someFlag: false,
  data: { 
    // Can be tons of nested structures, properties, etc
  },
},
getters: {
  getSomeFlag: (state) => state.someFlag,
},
mutations: {
  setSomeFlag(state, value) {
    state.someFlag = value;
  },
},
actions: {
  async someStoreCall({dispatch, commit, state}, data) {
    console.log('In someStoreCall');
  }
},

이 사용 사례에는 이벤트 버스를 사용하는 것이 좋다.

1. 당신의 Foo 컴포넌트의LocalMethod버스에서 이벤트(예: "FooChanged"라고 함)를 내보내는 경우
2. 바 구성요소("FooChanged" 이벤트에 가입)의 이벤트 핸들러가 작업을 수행한 후 버스에서 다른 이벤트(예: "BarFinished")를 방출한다.
3. Foo 구성 요소의 이벤트 핸들러("BarFinished" 이벤트에 가입)는 흐름의 다음 단계로 계속 진행됨

이와 비슷한 것:

eventBus.js

import Vue from "vue";
export default new Vue();

푸뷰

import events from "eventBus";

export default
{
  created()
  {
    events.$on("BarFinished", this.onBarFinished);
  },
  beforeDestroy()
  {
    events.$off("BarFinished", this.onBarFinished);
  },
  methods:
  {
    LocalMethod()
    {
      ....
      events.$emit("FooChanged", param1, param2);
    },
    onBarFinished(param1)
    {
      ...
    }
  }
}

바뷰

import events from "eventBus";

export default
{
  created()
  {
    events.$on("FooChanged", this.onFooChanged);
  },
  beforeDestroy()
  {
    events.$off("FooChanged", this.onFooChanged);
  },
  methods:
  {
    onFooChanged(param1, param2)
    {
      ...
      events.$emit("BarFinished", param1);
    }
  }
}

심플 솔루션

문제는Foo.vue본질적으로 그 일을 진행시키려 하고 있다.doWorkRelevantToBarPage에 있어서의 방법.Bar.vue다른 응답에서 제안된 대로 이벤트 버스를 사용하여 가장 쉽게 수행되지만 vue.js를 사용하여 더 큰/중요한 애플리케이션을 만들려면 이벤트 버스를 사용하는 것이 좋지 않다.

문제는 접근법에 있다.

와 함께doWorkRelevantToBarPage아마 당신은 에 저장되어 있는 상태를 바꾸고 싶어할 겁니다.Bar.vue다른 방법을 사용할 수도 있고이제 이 방법을 사용할 수 있으므로 다음에서 실행하십시오.Foo.vue그러나 이것은 잘못된 접근법처럼 보인다. (특히 vuex를 사용하고자 한다면) 당신은 본질적으로 외부적으로 구성 요소의 상태를 바꾸려고 하고 있다는 것을 알 수 있다. 그러나 대부분은 좋은 생각이 아니다.

Vuex 사용

다음 단계에서는 vuex를 사용하도록 코드를 조정하기 위해 수행할 수 있는 작업을 요약해 보십시오.

1. 다음 상태를 이동하십시오.Foo.vue매장 외적으로 변경해야 한다.
2. 저장소에 배치한 상태에 대한 돌연변이 및 게터 생성
3. 게터들을 당신의 것과 연결하시오.Bar.vue구성 요소
4. 여기에 표시된 대로 필요한 돌연변이를 커밋하는 작업 만들기(더 자세한 설명 이름 선택):

updateBarData({commit, dispatch}, ...args) {
  commit('mutation1')
  commit('mutation2')
  commit('mutation3')
  dispatch('action1')
  dispatch('action2')
  // ... other logic
}

5. 에 동작 Foo.vue

methods: {
  ...mapActions('store', ['someStoreCall', 'updateBarData']),
  someLocalMethod(someData) {
    this.updateBarData()
    this.someStoreCall(someData)
  }
}

이게 도움이 되었으면 좋겠어.

참조URL: https://stackoverflow.com/questions/59990111/how-to-correctly-order-calls-using-vue-vuex