Vuex 中如何使用 mapState, mapGetters, mapMutations, mapActions 辅助函数？

推荐答案

在 Vuex 中，mapState、mapGetters、mapMutations 和 mapActions 是四个常用的辅助函数，它们可以帮助我们简化在组件中访问 Vuex 的状态、获取器、突变和动作的方式。

使用 mapState

mapState 用于将 Vuex 中的状态映射到组件的计算属性中。

// www.javascriptcn.com code example
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      count: state => state.count,
      message: state => state.message
    })
  }
};

使用 mapGetters

mapGetters 用于将 Vuex 中的 getters 映射到组件的计算属性中。

// www.javascriptcn.com code example
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doubleCount',
      'formattedMessage'
    ])
  }
};

使用 mapMutations

mapMutations 用于将 Vuex 中的 mutations 映射到组件的方法中。

// www.javascriptcn.com code example
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations([
      'increment',
      'setMessage'
    ])
  }
};

使用 mapActions

mapActions 用于将 Vuex 中的 actions 映射到组件的方法中。

// www.javascriptcn.com code example
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions([
      'incrementAsync',
      'fetchMessage'
    ])
  }
};

本题详细解读

mapState

mapState 是一个辅助函数，它可以将 Vuex store 中的状态映射到组件的计算属性中。你可以通过传递一个对象或数组来指定要映射的状态。

• 对象形式：可以自定义计算属性的名称，并且可以对状态进行处理。
• 数组形式：直接映射状态名称到计算属性名称。

mapGetters

mapGetters 是一个辅助函数，它可以将 Vuex store 中的 getters 映射到组件的计算属性中。与 mapState 类似，你可以通过传递一个数组或对象来指定要映射的 getters。

• 数组形式：直接映射 getter 名称到计算属性名称。
• 对象形式：可以自定义计算属性的名称。

mapMutations

mapMutations 是一个辅助函数，它可以将 Vuex store 中的 mutations 映射到组件的方法中。通过传递一个数组或对象，你可以将 mutations 映射为组件的方法。

• 数组形式：直接映射 mutation 名称到方法名称。
• 对象形式：可以自定义方法名称。

mapActions

mapActions 是一个辅助函数，它可以将 Vuex store 中的 actions 映射到组件的方法中。与 mapMutations 类似，你可以通过传递一个数组或对象来指定要映射的 actions。

• 数组形式：直接映射 action 名称到方法名称。
• 对象形式：可以自定义方法名称。

这些辅助函数极大地简化了在组件中访问 Vuex store 的方式，使得代码更加简洁和易于维护。