84. Alternative Mapping Functions

vue cli start 링크open in new window

npm create vue@latest

프로젝트 링크

이번 시간엔 스토어를 컴포넌트에 매핑하는 대안적인 솔루션을 보여드리고자 합니다.
현재 저는 헤더 컴포넌트를 보고 있습니다.
이전에는 아래와 같이 mapStores 함수를 가져와서 스토어의 상태에 접근하는데 도움을 받았습니다.
아직 이에 대해 이야기할 기회가 없었지만, 스토어에는 함수가 있을 수 있습니다.
우리는 데이터를 정의하는 것에만 국한되지 않습니다.
상태와 상호작용하기 위해 스토어에 함수를 추가할 수 있습니다. mapStores 함수를 사용하면 스토어의 모든 것에 접근할 수 있습니다.
이 예제에서는 함수를 사용하지 않고 데이터만 접근하고 있습니다.
이 경우 전체 스토어를 매핑할 필요가 없을 수 있습니다.
import 문에서 상태만 매핑하는 것이 가능합니다.

<!-- AppHeader.vue -->
<script>
  import { mapStores, mapState, mapWritableState } from 'pinia'
  import useModalStore from '@/stores/modal'
  
  export default {
    name: 'AppHeader',
    computed: {
      ...mapStores(useModalStore),
      // ...mapWritableState(useModalStore, ['isOpen']),
    },
    methods: {
        toggleAuthModal() {
            this.modalStore.isOpen = !this.modalStore.isOpen;
            console.log(this.modalStore.isOpen)
            // this.isOpen = !this.isOpen;
            // console.log(this.modalStore.isOpen);
        }
    }
  }
</script>

<template>
  
</template>

mapState와 mapWritableState라는 두 함수를 추가하겠습니다.
이 두 함수는 컴포넌트에 상태를 매핑합니다.
두 함수 사이의 차이점은 mapState 함수는 상태를 읽기 전용으로 취급합니다.
이 두 함수는 컴포넌트에 상태를 매핑합니다.

두 함수의 차이점은 mapState함수는 상태를 읽기 전용으로 취급합니다.
상태를 업데이트하는 것은 허용되지 않습니다.
문서를 찾아보면, 이 과정은 mutation(변이)으로 알려져 있습니다.
개발자들은 update(업데이트)와 mutation(변이)라는 단어를 바꿔 사용합니다.
그들은 같은 의미를 가집니다.

mapWritableState 함수의 경우, 이 함수는 상태를 업데이트 할 수 있게 합니다.

왜 mapState 함수를 writable 함수보다 사용하고 싶을까요?
일부 경우에는 특정 컴포넌트에서 상태가 업데이트되는 것을 추가적으로 방지하고 싶을 수 있습니다.
모든 컴포넌트가 상태를 업데이트할 필요는 없으며, 단지 읽기만 할 수도 있습니다.
이 함수를 computed 속성에서 사용해보겠습니다.
mapWritableState 함수를 확장 연산자와 함께 추가할 수 있습니다.

<!-- AppHeader.vue -->
<script>
  import { mapStores, mapState, mapWritableState } from 'pinia'
  import useModalStore from '@/stores/modal'
  
  export default {
    name: 'AppHeader',
    computed: {
      // ...mapStores(useModalStore),
      ...mapWritableState(useModalStore, ['isOpen']),
    },
    methods: {
        toggleAuthModal() {
            // this.modalStore.isOpen = !this.modalStore.isOpen;
            // console.log(this.modalStore.isOpen)
            this.isOpen = !this.isOpen;
            console.log(this.modalStore.isOpen);
        }
    }
  }
</script>

<template>
  
</template>

이 함수는 두 개의 인자를 가집니다.
첫 번째 인자는 스토어입니다.
여기서는 modalStore를 전달합니다.
두 번째 인자는 스토어에서 가져올 상태 속성의 배열입니다.
모든 속성을 가져올 필요는 없습니다.
isOpen 속성만 추가합시다.
mapState와 mapWritableState 함수의 인자는 동일합니다.
하나를 다른 것으로 교체할 수 있습니다.
상태를 매핑한 후, toggleModal 함수를 업데이트해야 합니다.
상태는 더 이상 modalStore 객체를 통해 접근할 수 없고, 대신 속성으로 접근할 수 있습니다.
이 코드를 this.isOpen으로 간단히 줄일 수 있습니다.
이전과 같은 동작을 수행합니다.

보시다시피, 상태를 매핑하면 코드를 더 읽기 쉽게 만들 수 있습니다.
이 강의에서는 전체 스토어를 매핑할 필요가 없습니다.

# 84. Alternative Mapping Functions

84. Alternative Mapping Functions