Vuex 相关四个 map 方法使用

1.mapState方法

        作用：用于帮助我们映射 state 中的数据为计算属性

具体用法代码展示：

        1.对象写法：

    // 靠程序员自己写计算属性
    // num() {
    //   return this.$store.state.num
    // },

    // student() {
    //   return this.$store.state.student
    // },

    // school() {
    //   return this.$store.state.school
    // },

    // age() {
    //   return this.$store.state.age
    // },


    // 借助 mapState 生成计算属性，从 state 中读取数据 (对象写法)
    // {key: value} 其中 key 表示计算属性的名称，value 表示是从 state 中拿什么数据
    // 其中没有对象的简写形式，
    ...mapState({num:'num', student: 'student', school: 'school', age: 'age'})，

        2.数组写法：

    // 借助 mapState 生成计算属性， 从 state 中读取数据 (数组写法)
    ...mapState(['num', 'student', 'school', 'age']),

        注意：如果直接调用 mapState 不使用拓展运算符【...】mapState会返回一个函数数组，所以需要使用拓展运算符展开，记得后面加逗号

2.mapGetter方法

        作用：用于帮助我们映射 getters 中的数据为计算属性

具体用法代码展示：

        1.对象写法：

    // 自己写 计算属性获取 getter 中的值
    bigSum(){
        return this.$store.state.getters.bigSum
    }
    // 借助 mapGetters 生成计算属性， 从 getters 中读取数据集 (对象写法)
    ...map