【Vuex】 mapState, mapGetters, mapMutations, mapActions의 최소 사용법 요약

소개

Vuex의 다음 도우미에 대해 최소한의 사용법을 정리했습니다.

크게 나누어 이하 2개로 나누어 기억하면 OK입니다.

1. 상태 호출

mapState

mapGetters

2. 상태 변경

mapMutations

mapActions

※Vuex의 도입 방법이나 state란? 라는 기본에 대해서는 본 기사에서는 언급하지 않았습니다.

환경

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuex: 3.1.2

map ○○ 사용의 이점

다음과 같이 간단하게 호출할 수 있는 것이 가장 큰 장점입니다.

this.$store.state.state1 //通常
this.state1 //mapState使用

this.$store.getters.getter1 //通常
this.getter1 //mapGetters使用

this.$store.commit('mutation1', 引数) //通常
this.mutation1(引数) //mapMutations使用

this.$store.dispatch('action1', 引数) //通常
this.action1(引数) //mapActions使用

사용법

1.Vuex에서 사용하는 도우미 가져오기

우선, 모든 헬퍼에게 공통의 작업입니다.
다음과 같이 해당 구성 요소 내에서 사용하는 도우미를 가져옵니다.

Anything.vue

<script>
  import { mapState } from 'vuex'
//...
</script>

복수 사용하는 경우는 , 단락으로 쓰면 OK입니다.

Anything.vue

<script>
  import { mapGetters, mapMutations } from 'vuex'
//...
</script>

2. 필요한 state , getters , mutations , actions 목록

이 목록 업 방법은 여러 가지 있습니다만, 그 바리에이션은 공식 문서나 다른 기사를 참조해 주세요.

이 기사에서는 가장 많이 사용되는 것으로 보입니다.

스프레드 연산자를 사용하여 작성

상점의 이름과 템플리트에서 호출하는 이름이 동일합니다.

라는 패턴만 기재합니다.

※여기에서 쓰는 장소가

computed 내

methods 내

2 가지로 나뉘어 있으므로주의하시기 바랍니다.

2-1. mapState , mapGetters 의 경우

computed 에 쓰기

※mapGetters의 경우를 예로 합니다.

Anything.vue

<script>
  import { mapGetters } from 'vuex'

  export default {
//...
  computed: {
    ...mapGetters([
      'getter1',
      'getter2'
    ]),
    //スプレッド演算子を使うと他のものと共存できる。
    otherComputed() {
      //...
    }
//...
  }
</script>

2-2. mapMutations , mapActions 의 경우

methods 내에서 쓰기

Anything.vue

<script>
  import { mapGetters } from 'vuex'

  export default {
//...
  methods: {
    ...mapActions([
      'action1',
      'action2'
    ]),
    //スプレッド演算子を使うと他のものと共存できる。
    otherMethod() {
      //...
    }
//...
  }
</script>

3. 템플릿 내에서 나열된 것을 사용

3-1. mapState , mapGetters

다음과 같이 호출할 수 있습니다.

처음에 언급했듯이 매우 간단합니다.

Anything.vue

this.getter1
this.getter2

3-2. mapMutations , mapActions

다음과 같이 호출할 수 있습니다.

해당 action에 인수가 있는 경우, () 내에 인수를 넣으면 OK입니다.

Anything.vue

this.action1(引数)
this.action2(引数)

결론

끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)

상태 | Vuex

게터 | Vuex

뮤테이션 | Vuex

액션 | Vuex

모듈 | Vuex