Vuex 매핑에 대한 전체 가이드

Vuex는 양날의 검입니다. 올바르게 사용한다면 Vue를 사용하면 작업이 더 쉬워질 수 있습니다. 주의하지 않으면 코드가 복잡해질 수도 있습니다.

Vuex를 사용하기 전에 먼저 상태, 게터, 돌연변이 및 동작의 네 가지 주요 개념을 이해해야 합니다. 간단한 Vuex 상태는 저장소의 이러한 개념 내에서 데이터를 조작합니다. Vuex의 지도는 지도에서 데이터를 검색하는 훌륭한 방법을 제공합니다.

이 글에서는 Vuex 스토리지에서 데이터를 매핑하는 방법을 보여드리겠습니다. Vuex 기본 사항에 익숙하다면 이 콘텐츠는 더 깔끔하고 유지 관리하기 쉬운 코드를 작성하는 데 도움이 될 것입니다.

이 기사에서는 귀하가 Vue.js 및 Vuex의 기본 사항을 알고 있다고 가정합니다.

Vuex에서 매핑이란 무엇인가요?

Vuex의 맵을 사용하면 상태의 모든 종류의 속성(상태, getter, 변형 및 작업)을 구성 요소의 계산된 속성에 바인딩하고 상태의 데이터를 직접 사용할 수 있습니다.

아래는 테스트 데이터가 위치한 상태의 간단한 Vuex 스토어 예시입니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: "test data"
  }
})

상태에서 data 값에 액세스하려면 Vue.js 구성 요소에서 다음을 수행할 수 있습니다. data 的值，则可以在 Vue.js 组件中执行以下操作。

computed: {
        getData(){
          return this.$store.state.data
        }
    }

上面的代码可以工作，但是随着 state 数据量的开始增长，很快就会变得很难看。

例如：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: {
        id:1,
        age:23,
        role:user
        data:{
          name:"user name",
          address:"user address"
        }
    },
    services: {},
    medical_requests: {},
    appointments: {},
    }
  }
})

要从处于 state 中的用户对象获取用户名：

computed: {
        getUserName(){
          return this.$store.state.user.data.name
        }
    }

这样可以完成工作，但是还有更好的方法。

映射 state

要将 state 映射到 Vue.js 组件中的计算属性，可以运行以下命令。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
        ])
    }
}

现在你可以访问组件中的整个用户对象。

你还可以做更多的事，例如把对象从 state 添加到 mapState 方法。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
            'services'
        ])
    }
}

如你所见，这要干净得多。可以通过以下方式轻松访问用户名：

{{user.data.name}}

services 对象和映射的许多其他的值也是如此。

你注意到我们是如何将数组传递给 mapState() 的吗？如果需要为值指定其他名称，则可以传入一个对象。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState({
            userDetails:'user',
            userServices:'services'
        })
    }
}

现在可以通过简单地调用 userDetails 来引用 user。

何时映射整个 state

根据经验，仅当 state 中有大量数据，并且组件中全部需要它们时，才应该映射。

在上面的例子中，如果我们只需要一个值（例如 username），则映射整个用户对象就没有多大意义。

在映射时，整个对象将会全部加载到内存中。实际上我们并不想继续把不需要的数据加载到内存中，因为这将是多余的，并且从长远来看会影响性能。

映射 getter

映射 getter 的语法与 mapState 函数相似。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'firstCount',
      'anotherGetter',
    ])
  }
}

与映射 state 类似，如果你打算使用其他名称，则可以把对象传递给 mapGetters 函数。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      first:'firstCount',
      another:'anotherGetter',
    ])
  }
}

映射 mutation

映射 Mutation 时，可以在用以下语法来提交 Mutation。

this.$store.commit('mutationName`)

例如：

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`

      // `mapMutations` 也支持 payloads:
      'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`
    ]),
    ...mapMutations({
      find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`
    })
  }
}

映射 action

映射 action 与映射 mutation 非常相似，因为它也可以在方法中完成。使用映射器会把 this.$store.dispatch('actionName')

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`

      // `mapActions` 也支持 payloads:
      'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
    })
  }
}

위 코드는 작동하지만 상태 데이터의 양이 늘어나기 시작하면 금방 보기 흉해집니다.

예:

rrreee

상태의 사용자 개체에서 사용자 이름을 가져오려면:

rrreee
• 이렇게 하면 작업이 완료되지만 더 좋은 방법이 있습니다.
  상태 매핑
• 상태를 Vue.js 구성 요소의 계산된 속성에 매핑하려면 다음 명령을 실행할 수 있습니다.
rrreee
• 이제 구성 요소의 전체 사용자 개체에 액세스할 수 있습니다.
  상태의 객체를 mapState 메서드에 추가하는 등 더 많은 작업을 수행할 수 있습니다.
rrreee

보시다시피 훨씬 깔끔해졌네요. 사용자 이름은 개체 및 지도의 다른 많은 값과 마찬가지로

rrreee

services를 통해 쉽게 액세스할 수 있습니다.

배열을 mapState()에 어떻게 전달했는지 보셨나요? 값에 다른 이름을 지정해야 하는 경우 개체를 전달할 수 있습니다.

rrreee

이제 userDetails를 호출하여 user를 참조할 수 있습니다.

전체 상태를 매핑하는 경우

경험상, 상태에 많은 데이터가 있고 구성 요소에 모두 필요한 경우에만 매핑해야 합니다.

위 예에서 하나의 값(예: username)만 필요한 경우 전체 사용자 개체를 매핑하는 것은 의미가 없습니다.

매핑 중에는 전체 개체가 메모리에 로드됩니다. 우리는 실제로 불필요한 데이터를 메모리에 계속 로드하고 싶지 않습니다. 이는 중복되고 장기적으로 성능에 영향을 미치기 때문입니다.

Map getter

매핑 getter의 구문은 mapState 함수와 유사합니다.

rrreee

매핑 상태와 유사하게, 다른 이름을 사용하려는 경우 개체를 mapGetters 함수에 전달할 수 있습니다. rrreeeMap mutation

Mutation을 매핑할 때 다음 구문을 사용하여 Mutation을 제출할 수 있습니다. 🎜rrreee🎜예: 🎜rrreee🎜Map action🎜🎜Mapping 작업은 메서드 내에서도 수행할 수 있다는 점에서 mapping mutation과 매우 유사합니다. 매퍼를 사용하면 this.$store.dispatch('actionName')를 매퍼 배열에 있는 객체의 이름이나 키에 바인딩합니다. 🎜rrreee🎜요약🎜🎜이 내용을 보고 나면 다음을 배울 수 있습니다.🎜🎜🎜🎜Vuex에서 매핑이 작동하는 방식과 이를 사용해야 하는 이유에 대해 깊이 이해하세요.🎜🎜🎜Vuex 스토어의 모든 구성 요소를 매핑할 수 있습니다. (state, getter, mutation, action)🎜🎜🎜스토어가 언제 매핑되어야 하는지 확인하세요🎜🎜🎜🎜🎜영어 원본 주소: https://blog.logrocket.com/a-complete-guide-to-mapping-in- vuex /🎜🎜저자: Moses Anumadu🎜🎜🎜🎜관련 추천: 🎜🎜🎜🎜2020 프론트 엔드 vue 인터뷰 질문 요약(답변 포함) 🎜🎜🎜🎜vue 튜토리얼 추천: 2020 최신 5 vue.js 비디오 튜토리얼 선택 🎜🎜 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜🎜

위 내용은 Vuex 매핑에 대한 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!