Vue3的setup语法糖中使用mapState

Vue3的setup函数中如何使用mapState返回多个对象?

在Vue的组件中，要想使用Vuex中的多个State，我们经过会借助mapState辅助函数进行获取值，但是在Vue3中，通过computed的来获取多个值的方法官方并未提供，话不多说，直接上代码。

• useMapState.js

import { computed } from "vue";
import { mapState, useStore } from "vuex"

export const useMapState = (getKeys) => {

    const store = useStore();
    
    const storeState = {}
    const storeFns = mapState(getKeys)

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

    return storeState
}

在setup函数中使用

<script>
import { useMapState } from ''./Hooks/useMapState.js'

export default {
    setup() {
        const storeState = useMapState(['title', 'counter'])

        return {
            ...storeState
        }
    }
}

</script>

在setup语法糖中由于不能使用 return进行返回，所以只能按照如下方式写了

在setup语法糖中使用

<script setup>
import { useMapState } from ''./Hooks/useMapState.js'

const { title, counter } = useMapState(['title', 'counter'])

</script>