编辑
2023-04-13
Vuex-Version3
0
请注意,本文编写于 550 天前,最后修改于 509 天前,其中某些信息可能已经过时。

目录

mapState
说明
使用方法
Eg
mapGetters
说明
使用方法
Eg
mapMutations
说明
使用方法
Eg
mapActions
说明
使用方法

mapState

说明

用于组件获取state中状态

使用方法

  1. 引入vuex时将vuex的mapstate方法解构出来
import {mapState} from 'vuex'
  1. mapState的函数执行结果为对象 计算属性值需要为对象,而mapState的执行结果就是对象
computed: mapState({ msg: (state) => state.msg, }),

可以简写: 直接传一个字符串

computed: mapState({ msg: 'msg', }),

当映射的计算属性的名称与state的子节点名称相同时,可以直接传一个数组

computed: mapState(["msg"]),

写其它计算属性 通过es6的扩展运算符将其拆为键值对

computed: { ...mapState(["msg"]), some code }

Eg

mapState

mapGetters

说明

用于组件获取getters中处理的数据

使用方法

  1. 引入vuex时将vuex的mapGetters方法解构出来

    import {mapGetters} from 'vuex'

  2. 计算属性中使用

  • 扩展运算符拆分mapGetters
  • 然后使用

Eg

mapGetters

mapMutations

说明

用于组件提交mutations,相当于简化了this.$store.commit方法

使用方法

  1. 引入vuex时将vuex的mapMutations方法解构出来
import {mapMutations} from 'vuex'
  1. methods中使用
  • 扩展运算符拆分mapMutations
  • 然后使用

Eg

mapMutations

mapActions

说明

用于组件触发actions,简化store.dispatch()

使用方法

  1. 引入vuex时将vuex的mapGetters方法解构出来
import {mapActions} from 'vuex'
  1. 计算属性中使用
  • 扩展运算符拆分mapActions

  • 然后使用

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!