vuex에서의 mapState, mapGetters, mapActions, mapMetations의 차이점

vuex에서의 mapState, mapGetters, mapActions, mapMetations의 차이점

몇 달 동안 vue/vuex를 사용했는데 알 수 있습니다.mapState,mapGetters,mapActions,mapMutations하지만 그들이 하는 일은mapState.

이렇게 쓰고 있어요.mapState

// mutations.js 
user: {
   address: {},
   name: '',
   age: ''
}

제 코드에는 다음과 같은 것이 있습니다.

import { mapState } from 'vuex'
export default {
  data: {},

  computed: {
   ...mapState({
    address: state => state.user.address
   })
  }
} 

주소는 어디서든 쓸 수 있는데 다른 건 어디에 쓰는지 모르겠어요.

누가 간단한 예를 들어줄 수 있나요?감사합니다.

그 지도들 중 어떤 것도 의무사항이 아니다.그 목적은 단지 컴포넌트에 계산된 속성이나 메서드를 쉽게 작성하는 것입니다.가장 좋은 것은 DRY(복제 회피)입니다.

mapState는 특정 상태의 값을 반영하는 계산된 속성 작성을 단순화하는 도우미입니다.

마찬가지로:

• mapGetters는 지정된 getter에 의해 반환된 값을 반영하는 계산된 속성 작성을 단순화하는 도우미입니다.
  • 메서드 스타일의 getter도 계산된 속성에 매핑해야 합니다.
• mapActions를 호출하는 것과 동등한 메서드의 작성을 단순화하는 도우미입니다.dispatch소송 중
• mapMutations를 호출하는 것과 동등한 메서드의 작성을 단순화하는 도우미입니다.commit돌연변이를 일으키죠

코드가 도움이 되므로 아래 데모에서는 이러한 모든 맵퍼의 사용 예와 맵퍼 없이 동등한 맵퍼를 사용하는 예를 보여 줍니다.그들의 행동은 정확히 같다.맵퍼를 사용하면 적은 코드로 쓸 수 있습니다(앱의 많은 컴포넌트에서 반복됩니다).

const store = new Vuex.Store({
  strict: true,
  state: {name: "John"},
  mutations: {
  	changeName(state, data) {
    	state.name = data
    }
  },
  actions: {
    fetchRandomName({ commit }) {
      let randomId = Math.floor(Math.random() * 12) + 1  ;
      axios.get("https://reqres.in/api/users/" + randomId).then(response => {
        commit('changeName', response.data.data.first_name)
      })
    }
  },
  getters: {
    getName: state => state.name,
    getTransformedName: (state) => (upperOrLower) => {
      return upperOrLower ? state.name.toUpperCase() : state.name.toLowerCase()
    }
  }
});
new Vue({
  store,
  el: '#app',
  data: { newName: 'Bob' },
  computed: {
    ...Vuex.mapState(['name']),
    nameNoMapper() { return this.$store.state.name },
    ...Vuex.mapGetters(['getName', 'getTransformedName']),
    getNameNoMapper() { return this.$store.getters.getName },
    getTransformedNameNoMapper() { return this.$store.getters.getTransformedName }
  },
  methods: {
    ...Vuex.mapActions(['fetchRandomName']),
    ...Vuex.mapMutations(['changeName']),
    fetchRandomNameNoMapper() { this.$store.dispatch('fetchRandomName') },
    changeNameNoMapper(newName) { this.$store.commit('changeName', newName) },
  }
})

table, tr, td {
  font-family: monospace;
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>

<div id="app">
  <table>
    <tr>
      <td style="width: 250px">With Mappers</td>
      <td style="width: 310px">Without Mappers</td>
    </tr>
    <tr>
      <td>
        name: {{ name }}<br>
        getName: {{ getName }}<br>
        getTransformedName(true): {{ getTransformedName(true) }}<br>
        getTransformedName(false): {{ getTransformedName(false) }}
      </td>
      <td>
        nameNoMapper: {{ nameNoMapper }}<br>
        getNameNoMapper: {{ getNameNoMapper }}<br>
        getTransformedNameNoMapper(true): {{ getTransformedNameNoMapper(true) }}<br>
        getTransformedNameNoMapper(false): {{ getTransformedNameNoMapper(false) }}
      </td>
    </tr>
  </table>
  <hr>
  <button @click="fetchRandomName">ACTION: fetchRandomName</button> - <button @click="fetchRandomNameNoMapper">ACTION: fetchRandomNameNoMapper</button><br>
  <hr>
  <input v-model="newName"><button @click="changeName(newName)">MUTATION: changeName</button><button @click="changeNameNoMapper(newName)">MUTATION: changeNameNoMapper</button>
</div>

언급URL : https://stackoverflow.com/questions/49696542/differences-b-n-mapstate-mapgetters-mapactions-mapmutations-in-vuex