这篇文章主要介绍“vue3在setup中怎么使用mapState”，在日常操作中，相信很多人在vue3在setup中怎么使用mapState问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3在setup中怎么使用mapState”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
hooks/useMapState.ts
计算
安全
数据库
网络和加速
企业服务
import { computed } from "vue"
import { mapState, useStore } from "vuex"
export default function (state:any) {
// 1. 获取实例 $store
const store = useStore()
// 2. 遍历状态数据
const storeStateFns = mapState(state)
// 3. 存放处理好的数据对象
const storeState = {}
// 4. 对每个函数进行computed
Object.keys(storeStateFns).forEach(fnKey => {
const fn = storeStateFns[fnKey].bind({ $store: store })
// 遍历生成这种数据结构 => {name: ref(), age: ref()}
storeState[fnKey] = computed(fn)
})
return storeState
}使用
<script lang="ts" setup>
import useMapState from "@/hooks/useMapState"
const myState:any = useMapState({
includeList: (state: any) => state.keepAlive.includeList
})
const { includeList } = myState
</script>在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
}<script>
import { useMapState } from ''./Hooks/useMapState.js'
export default {
setup() {
const storeState = useMapState(['title', 'counter'])
return {
...storeState
}
}
}
</script>在setup语法糖中由于不能使用 return进行返回，所以只能按照如下方式写了
<script setup>
import { useMapState } from ''./Hooks/useMapState.js'
const { title, counter } = useMapState(['title', 'counter'])
</script>到此，关于“vue3在setup中怎么使用mapState”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/mrhaoxiaojun/article/details/124082989
