Vuex에서의 변환 유형의 실제 사용

Vuex에서의 변환 유형의 실제 사용

저는 Vue(2.x)+Vuex에 대해 얼마 전부터 연구하고 있는데, 제가 항상 봐왔던 패턴 중 하나는 돌연변이 타입의 사용입니다.

파일 수가 많은 프로젝트에 복잡함을 추가하는 것은 불필요한 코드일 뿐입니다.실제 사용법을 이해할 수 있는 충분한 경험이 없었던 것 같습니다.그 때문에, 이 질문입니다.

Mutation Types 문서에 따르면 이 문서는 완전히 옵션이며, "이를 통해 코드는 린터처럼 도구를 활용할 수 있으며, 모든 상수를 하나의 파일에 저장함으로써 공동작업자는 애플리케이션 전체에서 어떤 돌연변이가 가능한지 한눈에 파악할 수 있습니다."라고 기술되어 있습니다.거기서 멈춰요

기타 사항:

상수를 사용할지 여부는 주로 선호 사항입니다. 개발자가 많은 대규모 프로젝트에서 도움이 될 수 있지만, 상수가 마음에 들지 않으면 완전히 선택 사항입니다.

제가 이해하고자 하는 것은 툴링과 소위 대형 프로젝트 모두에 대해 정확히 어떤 이점이 있는지입니다.그것의 몇 가지 예는 정말 좋을 것이다.

문서의 샘플 코드조차 충분히 어리석어서 이를 단념시킬 수 없습니다.

//mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION';

---

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // we can use the ES2015 computed property name feature
    // to use a constant as the function name
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

단순한 것이 아니라:

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    //To me this is already clear enough to understand the purpose 
    //of the mutation and to see AT-A-GLANCE what all mutations in the
    //Application are
    someMutation (state) {
      // mutate state
    }
  }
})

특히 최신 IDE(Eclipse, Npp)에는 이미 그룹화 기능이 있기 때문에 다음과 같은 모든 것을 한눈에 파악할 수 있습니다.

...
mutations: {
  + someMutation1 
  + someMutation2 
  + someMutation3 
  + someMutation4 
  + someMutation5 
  + someMutation6 
  + someMutation7 
}
...

이런 것을 실제로 사용해 본 적이 없어서 마치 5마리 원숭이 실험 같다.

예를 들어 다음과 같습니다.

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    setRelationshipWithRolePlayers (state) {
      // mutate state
    }
  }
})

또 다른 컴포넌트에서는 다음을 수행합니다.

this.$store.commit('setRelationshipsWithReolePlayers');

상수를 Import하면 위와 같은 작은 오타로 인해 발생하는 문제를 디버깅하는 데 걸리는 시간을 절약할 수 있습니다.이 문제는 유감스럽게도 원하는 것보다 자주 발생합니다.

또한 돌연변이 및 동작이 많은 경우(동작에도 돌연변이 유형을 사용하는 것이 좋습니다) 어떻게 불리는지 기억하는 것이 쉽지 않기 때문에 에서 Import합니다.mutation-typesfile을 사용하면 자동완료와 함께 상수를 자동 Import할 수 있습니다.

또한 모든 돌연변이와 액션을 같은 파일에 포함시키면 글로벌 검색을 하지 않고도 프로젝트의 다른 부분에서 이미 변환/액션 이름이 사용되고 있는지 쉽게 확인할 수 있습니다(프로젝트가 커지면 저장하거나 여러 개의 스토어를 가지고 있을 수 있습니다).

프로젝트의 성패를 좌우하는 것은 아닐지도 모르지만, 큰 도움이 되어 중간 규모의 프로젝트에서 시간을 대폭 단축할 수 있습니다.

은 변환 타입을 오타를 합니다.mapMutations또는 사용하다Symbol

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
export const SOME_MUTATION_SYMBOL = Symbol('SOME_MUTATION')

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION, SOME_MUTATION_SYMBOL } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // we can use the ES2015 computed property name feature
    // to use a constant as the function name
    [SOME_MUTATION] (state) {
      // mutate state
    },
    [SOME_MUTATION_SYMBOL] (state) {
      // mutate state
    }
  }
})


import { mapMutations } from 'vuex'
import { SOME_MUTATION, SOME_MUTATION_SYMBOL } from './mutation-types'

export default {
  // ...
  methods: {
    ...mapMutations([
      // 'SOME_MUTATION' 
      SOME_MUTATION // no typos and you get IDE intellisence
    ]),
    ...mapMutations({
      localName: SOME_MUTATION_SYMBOL // map to localName
    })
  }
}

언급URL : https://stackoverflow.com/questions/51268001/practical-usage-of-mutation-types-in-vuex