mapState

说明

用于组件获取state中状态

使用方法

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

    import {mapState} from 'vuex'

2. mapState的函数执行结果为对象 计算属性值需要为对象，而mapState的执行结果就是对象

    computed: mapState({
    msg: (state) => state.msg,
    }),

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

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

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

      computed: mapState(["msg"]),

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

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

Eg

mapGetters

说明

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

使用方法

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

   import {mapGetters} from 'vuex'

2. 计算属性中使用

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

Eg

mapMutations

说明

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

使用方法

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

    import {mapMutations} from 'vuex'

2. methods中使用

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

Eg

mapActions

说明

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

使用方法

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

    import {mapActions} from 'vuex'

2. 计算属性中使用

• 扩展运算符拆分mapActions

• 然后使用