Vuex四个map的方法使用

四个map方法的使用

mapState

1. mapState方法：用于帮助我们映射 state 中的数据为计算属性

computed: {
  // 借助 mapState生成计算属性：t1、t2、t3（对象方法）
  ...mapState({t1: 't1', t2: 't2'，t3: 't3'})

  // 借助 mapState生成计算属性：t1、t2、t3 (数组写法)
  ...mapState(['t1', 't2', 't3'])
}

2. mapGetters方法：用于帮助我们映射 getters中的数据为计算属性

computed: {
  // 借助mapGetters生成计算属性，g1，g2（对象写法）
  ...mapGetters({ g1: 'g1', g2: 'g2'})

  // 借助mapGetters生成计算属性，g1，g2（数组写法）
  ...mapGetters(['g1', 'g2'])
}

3. mapActions方法：用于帮助我们生成与 actions对话的方法，即：包含 $store.dispatch(xxx)的函数

methods: {
  // 对象形式
  ...mapActions({ 生成的函数名: '响应组件动作的方法名'}),
  ...mapActions(['响应组件动作的方法名'])
}

4.mapMutations方法名：用于帮助我们生成与 actions对话的方法，即：包含 $store.commit(xxx)的函数

methods: {
  // 对象形式
  ...mapMutations({生成的函数名: '操作state的方法名'})
}

• 注：mapActions与mapMutations使用时，若需要传递参数：在模版中绑定事件时传递好参数，否则参数是事件对象。