差异b / n mapue，mapGetters，mapActions，mapMutations in Vuex

Question

我几个月来一直在使用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
   })
  }
} 

然后我可以在任何地方使用地址，但我不知道其他人使用的是什么。

有人能给出一个简单的例子吗？感谢

Answer 1

这些映射器都不是强制性的。他们的目标只是在组件中轻松创建计算属性或方法。他们最好是干（避免重复）。

mapState是一个帮助程序，可以简化创建反映给定状态值的计算属性。

类似地：

• mapGetters是一个帮助程序，可以简化创建计算属性，该属性反映给定getter返回的值。
  • 请注意，即使method-style getters也应映射到计算属性。
• mapActions是一个帮助程序，可以简化创建方法，这与在操作上调用dispatch等效。
• mapMutations是一个帮助程序，可以简化创建方法，这与在变异上调用commit等效。

由于代码有帮助，下面的演示显示使用所有这些映射器的示例，以及等效的没有映射器。他们的行为完全一样。映射器只允许您使用较少的代码编写（考虑到这将在您的应用程序的许多组件中重复）。

＆＃13;

＆＃13;

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) },
  }
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;