Vuex 中的 mapState 和 mapGetters

        

目录

一、mapState 的用法

1.对象写法

2.数组写法

二、mapGetters 的用法

1.对象写法

2.数组写法

三、模块化之后的用法

四、总结

---

        在 Vue 应用中，状态管理是至关重要的一环。Vuex 作为 Vue 的官方状态管理库，提供了一套高效的方式来管理应用中的状态。在 Vuex 中，mapState 和 mapGetters 是两个非常有用的辅助函数，它们可以帮助我们简化在组件中使用 Vuex Store 的过程。本文将详细介绍这两个函数的用法及其在模块化时的应用。

一、mapState 的用法

mapState 用于将 Vuex Store 中的 state 映射为组件的计算属性。你可以使用两种写法：对象写法和数组写法。

1.对象写法

import { mapState } from 'vuex'

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

在上面的代码中，mapState 将 Vuex Store 中的 count 和 message 映射为组件中的计算属性。

2.数组写法

如果希望简化代码，可以使用数组写法：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count', 'message'])
  }
}

在该写法中，mapState 将 Store 中的属性名直接映射为组件的计算属性，使代码更加简洁。

二、mapGetters 的用法

与 mapState 类似，mapGetters 用于将 Vuex Store 中的 getters 映射为组件的计算属性。它同样支持对象写法和数组写法。

1.对象写法

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      doubleCount: 'getDoubleCount',
      upperCaseMessage: 'getUpperCaseMessage'
    })
  }
}

在这个示例中，mapGetters 将 Store 中的 getDoubleCount 和 getUpperCaseMessage 映射成了组件的计算属性。

2.数组写法

使用数组写法也很方便：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getDoubleCount', 'getUpperCaseMessage'])
  }
}

这种方式更加简洁，尤其在需要映射多个 getters 时。

三、模块化之后的用法

在 Vuex 中，如果你使用模块化来管理状态和 getters，mapState 和 mapGetters 的用法也非常相似，但需要指定所属的模块名。

import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState('moduleName', {
      count: state => state.count,
      message: state => state.message
    }),
    ...mapGetters('moduleName', ['getDoubleCount', 'getUpperCaseMessage'])
  }
}

在这个例子中，mapState 和 mapGetters 的第一个参数是模块的名称，后面的参数和之前的用法相同。这样你就可以在组件中轻松使用模块化后的 state 和 getters。

或者还可以这样

将多个模块的getters属性独立出来，放到一个文件

const getters = {
  getDoubleCount: state => state.moduleName.属性,
  getUpperCaseMessage: state => state.moduleName.属性
}
export default getters

 在vuex中引入这个getters文件

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    moduleName
  },
  getters
})

export default store

 如此之后，mapGetters便可这样使用，就不需要再去写模块名了

import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    //直接引入该模块的State属性的所有值，适合使用到这个模块的多个属性的情况
    ...mapState(["moduleName"]),
    ...mapGetters(['getDoubleCount', 'getUpperCaseMessage'])
  }
}

四、总结

        使用 mapState 和 mapGetters 可以显著简化在 Vue 组件中使用 Vuex Store 的过程。本文介绍了它们的用法以及在模块化时的特殊注意事项。掌握这些辅助函数，将能更高效地管理和使用应用中的状态。希望这篇文章能对你在 Vue 开发中有所帮助！