Vuex的map辅助函数

使用背景

当某一个数据数据嵌套的太深时，使用this.$store.state.数据名方式获取数据太麻烦时，可以使用map辅助函数来优化。

代码演示

// 步骤
// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

// 2. 在computed中使用 ...mapState(['books'])
// const res = mapState(['books'])
// res的结果是一个对象： { books: function() {}}
// console.log('mapState', res)

export default {
  computed: {
    c1 () {
      return 'c1'
    },
    // books: function() {}
    // ..res： 把res这个对象合并到computed对象中
    // ...res
    ...mapState(['books'])
  }
}
</script>

mapState的使用

用来获取state中的数据

export default {
  computed: {
      // 全局数据
      ...mapState(['state数据']),
      // 重命名
      ...mapState({'属性名': 'state数据'}),
      // modules中的数据，第一个参数为模块名，第二个参数为需要获取的数据
      ...mapState('模块名'，['state数据']),
  }
}

mapGetters的使用

用来获取getters的数据

export default {
  computed: {
      // 全局数据
      ...mapGetters(['getters数据']),
      // 重命名
      ...mapGetters({'属性名': 'getters的数据'}),
      // modules中的数据，第一个参数为模块名，第二个参数为需要获取的数据
      ...mapGetters('模块名'，['getters数据']),
  }
}

mapMutations的使用

用来获取mutations的数据

export default {
  methods: {
      // 全局数据
      ...mapMutations(['mutations数据']),
      // 重命名
      ...mapMutations({'属性名': 'mutations的数据'}),
      // modules中的数据，第一个参数为模块名，第二个参数为需要获取的数据
      ...mapMutations('模块名'，['mutations数据']),
  }
}

mapActions的使用

用来获取actions的数据

export default {
  methods: {
      // 全局数据
      ...mapActions(['actions数据']),
      // 重命名
      ...mapActions({'属性名': 'actions的数据'}),
      // modules中的数据，第一个参数为模块名，第二个参数为需要获取的数据
      ...mapActions('模块名'，['actions数据']),
  }
}

总结

• 获取state和getters的数据写在组件的计算属性中;
• 获取mutations和actions的数据写在组件的methods属性中；
• 获取模块的数据需要加上数据所在模块的模块名；