mapState

MapState is a helper function provided by Vuex, the state management library for Vue.js. It generates computed properties that expose the store’s state to a component, allowing components to read reactive data from the Vuex store without manually writing boilerplate getters.

The primary use of mapState is in the options API of a component. It is typically spread into the component’s computed options, returning an object where each key becomes a computed property that returns a corresponding piece of state from the store. For example, you can map top-level state properties by listing their names, or map derived values with a function that accesses nested state.

MapState supports several forms. It can take an array of strings to map multiple top-level state properties with the same local names, or an object to customize the local computed names or to derive values with a function. It also supports namespaces for Vuex modules: you can pass the module name as the first argument followed by an array of properties, or pass an object or function that targets a namespaced state.

In Vue 2 and Vuex 3/4, mapState is commonly used as ...mapState(['count', 'userName']) or ...mapState('auth', ['token']) in the computed section. In addition to the array form, you can map a local computed name with a function: localName: state => state.some.deepProperty. While mapState is designed for the Options API, in the Composition API you can achieve the same behavior by using useStore and computed.

See also mapGetters, mapActions, and mapMutations as related Vuex helpers.