반응형
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
반응형
'IT이야기' 카테고리의 다른 글
Vue.js 경로 변경 모달 열기 (0) | 2022.04.01 |
---|---|
nuxt 라우터 모듈의 router.js 파일에서 Vuex 저장소에 액세스하는 방법? (0) | 2022.04.01 |
Python에서 도스 경로를 구성요소로 분할하는 방법 (0) | 2022.04.01 |
리액션 구성 요소를 부모 구성 요소와 비교하여 배치하는 방법? (0) | 2022.04.01 |
vue js에서 특정 구성 요소로 리디렉션하는 방법 (0) | 2022.04.01 |