vue3在setup中使用mapState解读
短信预约 -IT技能 免费直播动态提醒
vue3 setup使用mapState
mapState和computed结合在Vue3版本中使用，广大网友写了很多，这里只做一个实战后的应用笔记，不多赘述
创建一个hook
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>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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
