Vue3 setup中如何使用辅助函数mapState?

众所周知在template模板中想使用store中的变量，如下：

<template>
    <div>{{ $store.state.name }}</div>
    <div>{{ $store.state.age }}</div>
    <div>{{ $store.state.sex }}</div>
</template>

这样的写法会看起来不是很美观，所以我们就想到了使用计算属性computed，如下：

<template>
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <div>{{ sex }}</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed() {
    name() {
       return this.$store.state.name
    },
    age() {
       return this.$store.state.age
    },
    sex() {
       return this.$store.state.sex
    }
  }
};
</script>

template模板中看似比之前的写法简单了，但是计算属性computed中越来越臃肿。假设计算属性变量越来越多，那这种写法肯定是不合理的，这时候我们就想到了vuex提供的mapState函数，如下：

<template>
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <div>{{ sex }}</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {};
  },
  computed() {
    ...mapState(['name', 'age', 'sex'])

    //另一种对象写法:
    //...mapState({
    //    name: state => state.name,
    //    age: state => state.age,
    //    sex: state => state.sex
    //})
  }
};
</script>

以上都是在Vue2中mapState的使用，那么Vue3中如何使用辅助函数mapState呢？官方文档并没有提供给我们一个好的处理方式，所以我们开发者就要自己想办法解决。在Vue3中使用mapState之前，首先我们得要知道mapState函数的返回值是什么？通过以下代码可以看出 mapState函数返回的是一个对象，对象里面是若干个函数。

computed: {

    // mapState(["counter", "age"]) 返回值如下： 
    // {
    //   counter: function(){
    //     return this.$store.state.counter
    //   },

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



    // ...mapState(["counter", "age"]) 返回值如下： 
    // counter() {
    //     return this.$store.state.counter
    // },

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

  },

如果了解了mapState的返回值 ，那么接下来的代码需要Vue3的一些基础知识才能看懂。

1. 首先我们要知道在setup入口函数中是无法使用this关键字的，因为setup在实例对象创建后执行但没有去绑定this。我们可以在setup中打印下this是为undefined的，所以我们就用不了this.$store.state.xxx。

2. 在Vue3中计算属性的写法是和Vue2中有些出入的，Vue3中的计算属性是一个方法，需要定义一个变量去接收，而这个变量是computed返回的响应式ref对象，如下：

<template>
  <div>{{ name }}</div>
  <div>{{ userInfo }}</div>  
</template>

<script>
import { computed } from 'vue'
export default {
 
    setup() {
        let name = ref('张三')
        let age = ref(24)
	
        //计算属性
        let userInfo = computed(() => {
            return `大家好！我的名字：${name.value},今年${age.value}`
        })

        return {
            name,
            age,
            userInfo,
        }
    }

}
</script>

 彻底了解完以上的代码，下面就是在Vue3中使用mapState的代码了。后续也可以封装成一个自定义hook。

<template>
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <div>{{ sex }}</div>
</template>

<script>
import { mapState, useStore ) from "vuex"
export default {
  setup() {
    const store = useStore();
    const storeStateFns = mapState(["name", "age", "sex"]);

    const storeState = {};
    Object.keys(storeStateFns).forEach(fnKey => {
      const fn = storeStateFns[fnKey].bind({ $store: store });
      storeState[fnKey] = computed(fn);
    });

    return {
      ...storeState
    };
  },

};
</script>