IT이야기

vuex에서 작업을 생성하는 올바른 방법

cyworld 2022. 4. 1. 21:12
반응형

vuex에서 작업을 생성하는 올바른 방법

a1로 단순(당시/캐치 호출에 체인을 지정하지 않고) vuex 작업을 만들기에 충분한가?아니면 a2로 생성되는 약속(+또한 거부 분기를 추가)으로 매번 작성해야 하는가?

미리 고맙다...

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({
    state: { ... }
    ...
    actions: {
        a1: (state, response) => {
            state.commit('setNavMenu',{signIn: true, signUp: true, signOut: false});
        ...        
        },
        a2: (state, response) => {
            return new Promise((resolve) => {
                state.commit('setNavMenu',{signIn: true, signUp: true, signOut: false});
            ...
            resolve();
            });
        },        

...
     

첫 번째 작업과 마찬가지로 (약속이나 다른 비동기 코드 없이) 동기식 작업을 생성할 수 있다.a1

하지만, 그런 다음 돌연변이 함수를 직접 호출할 수 있다.a1경우에 따라서는 그럴 것이다.setNavMenu동작과 돌연변이의 주요한 차이점은 돌연변이가 불가능할 때, 기본적으로 비동기 코드를 수행하기 위해 동작이 필요하지 않을 경우, 동작이 필요하지 않고 그냥 돌연변이로 갈 수 있다는 것이다.

자세한 내용은 https://vuex.vuejs.org/en/actions.html에서 공식 문서를 참조하십시오.

그렇지 않으면, 동작에 비동기적인 측면이 있거나 동작으로부터 응답을 받고자 할 때만 그렇게 할 수 있다.

모든 업데이트가 동기식이라면(API나 비동기식 피드백에 의존하지 않음), 돌연변이를 직접 호출하여 작업을 완전히 건너뛸 수도 있다.

예: (공식 문서로부터)

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // map `this.increment()` to `this.$store.commit('increment')`

      // `mapMutations` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // map `this.add()` to `this.$store.commit('increment')`
    })
  }
}

동작을 사용하는 이유는 API에서 제공되는 데이터를 돌연변이가 사용하기를 원하는 경우와 같이 비동기적 변경을 처리하고 있을 때입니다.

참조URL: https://stackoverflow.com/questions/50411779/correct-way-create-action-in-vuex

반응형