mapState、mapGetter、mapActions、mapMutations使用方法

BonnieYY

于 2019-02-26 15:46:58 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 前端

本文链接：https://blog.youkuaiyun.com/qq_39039128/article/details/87936481

前端同时被 2 个专栏收录

59 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

本文深入探讨了Vue.js框架中Vuex的状态管理模式，详细解析了mapState、mapGetters、mapActions及mapMutations的使用技巧，帮助开发者更高效地进行状态管理和组件交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

//this.$store.state.xxx  映射
...mapState({
    add:state=>state.add,
    count:state=>state.count
})
//2
...mapState(['add','count']);


...mapGetters(['add','count']);

...mapActions({
    'fn1':'fn1',
    'fn2':'fn2',
});
...mapActions(['fn1','fn2'])

this.$store.dispatch('fn1')  ===  this.fn1

...mapMutations({
    'fn1':'fn1',
    'fn2':'fn2',
});
...mapMutations(['fn1','fn2'])

this.$store.commit('fn1')  ===  this.fn1