mapState, mapActions, mapMutations 举例详解

1. mapState

mapState 是一个辅助函数，用于将 Vuex store 中的状态映射到组件的计算属性中。这样可以简化代码，避免手动编写大量的计算属性。

原理

• mapState 接受一个数组或对象作为参数。
• 如果传入的是数组，数组中的每个字符串都会被映射为组件的计算属性。
• 如果传入的是对象，对象的键名是组件的计算属性名，值是从 store 中获取的状态。

示例

假设我们有一个 Vuex store 如下：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
    name: 'Vue'
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

在组件中使用 mapState：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Name: {{ name }}</p>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    // 数组形式
    ...mapState(['count', 'name']),
    // 对象形式
    ...mapState({
      countAlias: state => state.count,
      nameAlias: state => state.name
    }),
    // 使用 getters
    ...mapGetters(['doubleCount'])
  }
};
</script>

2. mapActions

mapActions 是一个辅助函数，用于将 Vuex store 中的 actions 映射到组件的方法中。这样可以简化代码，避免手动编写大量的方法。

原理

• mapActions 接受一个数组或对象作为参数。
• 如果传入的是数组，数组中的每个字符串都会被映射为组件的方法。
• 如果传入的是对象，对象的键名是组件的方法名，值是从 store 中获取的 action。

示例

假设我们有一个 Vuex store 如下：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    }
  }
});

在组件中使用 mapActions：

<template>
  <div>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    // 数组形式
    ...mapActions(['increment', 'decrement']),
    // 对象形式
    ...mapActions({
      incrementAlias: 'increment',
      decrementAlias: 'decrement'
    })
  }
};
</script>

3. mapMutations

mapMutations 是一个辅助函数，用于将 Vuex store 中的 mutations 映射到组件的方法中。这样可以简化代码，避免手动编写大量的方法。

原理

• mapMutations 接受一个数组或对象作为参数。
• 如果传入的是数组，数组中的每个字符串都会被映射为组件的方法。
• 如果传入的是对象，对象的键名是组件的方法名，值是从 store 中获取的 mutation。

示例

假设我们有一个 Vuex store 如下：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  }
});

在组件中使用 mapMutations：

<template>
  <div>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    // 数组形式
    ...mapMutations(['increment', 'decrement']),
    // 对象形式
    ...mapMutations({
      incrementAlias: 'increment',
      decrementAlias: 'decrement'
    })
  }
};
</script>

总结

• mapState 用于将 Vuex store 的状态映射到组件的计算属性中。
• mapActions 用于将 Vuex store 的 actions 映射到组件的方法中。
• mapMutations 用于将 Vuex store 的 mutations 映射到组件的方法中。

这些辅助函数的主要目的是简化代码，减少样板代码，提高开发效率。希望这些示例能帮助你更好地理解和使用它们。