摘要：在 Vue.js 中，Vuex 是官方推荐的状态管理库。Vuex 提供了几个辅助函数来简化你在组件中读取和操作 State、getters、mutations 和 actions 的方式，特别适用于模块化结构。辅助函数的使用能让代码更简洁、清晰。
在 Vue.js 中，Vuex 是官方推荐的状态管理库。Vuex 提供了几个 辅助函数 来简化你在组件中读取和操作 State、getters、mutations 和 actions 的方式，特别适用于模块化结构。辅助函数的使用能让代码更简洁、清晰。
假设 Vuex 的状态如下：
// store.jsexport default new Vuex.Store({state: {count: 0},getters: {doubleCount: state => state.count * 2},mutations: {increment(state) {state.count++}},actions: {asyncIncrement({ commit }) {setTimeout( => {commit('increment')}, 1000)}}})import { mapState } from 'vuex'export default {computed: {...mapState(['count'])// 或指定映射名// ...mapState({ myCount: 'count' })}}import { mapGetters } from 'vuex'export default {computed: {...mapGetters(['doubleCount'])// 或指定映射名// ...mapGetters({ myDouble: 'doubleCount' })}}import { mapMutations } from 'vuex'export default {methods: {...mapMutations(['increment'])}}+1import { mapActions } from 'vuex'export default {methods: {...mapActions(['asyncIncrement'])}}假设你的 store 中使用了模块：
// store/modules/counter.jsexport default {namespaced: true,state: => ({ count: 0 }),getters: {double(state) {return state.count * 2}},mutations: {increment(state) {state.count++}},actions: {asyncIncrement({ commit }) {setTimeout( => {commit('increment')}, 500)}}}import { createNamespacedHelpers } from 'vuex'const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('counter')export default {computed: {...mapState(['count']),...mapGetters(['double'])},methods: {...mapMutations(['increment']),...mapActions(['asyncIncrement'])}}来源：炫明教育