Vuex中的4个map配置

最新推荐文章于 2025-07-27 16:00:00 发布

原创最新推荐文章于 2025-07-27 16:00:00 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vuex中用于状态管理和操作的四个核心工具：mapState、mapGetters、mapMutations和mapActions。它们分别用于将Vuex store中的state和getters映射为组件的计算属性，以及简化commit和dispatch的过程，提升代码的可读性和效率。通过引入并使用这些工具，开发者可以更方便地在组件中访问和操作store中的数据。

学习笔记

四个map配置分别为mapState、mapGetters、mapMutations、mapActions

前两个的作用是映射state和getters的数据为计算属性

后面两个是为了帮助我们生成$store.dispatch和$store.commit的函数，方便我们少写一些重复性的代码

使用方法是

首先要去引入import {mapState,mapGetters、mapMutations、mapActions} from "Vuex"

然后在computed里使用mapState,mapGetters，即...mapState({key:value})形式，key是计算属性名，value是要在state里读取的名。同理...mapGetters({key:value}).key也是计算属性名，value是要在getters里读取的方法名。

mapMutations、mapActions是要在方法上使用的，也是...mapMutations({key:value}),key为方法名，value为Mutations里的动作名，mapActions也是同理