这篇文章主要介绍“vue3在setup中怎么使用mapState”,在日常操作中,相信很多人在vue3在setup中怎么使用mapState问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3在setup中怎么使用mapState”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
vue3 setup使用mapState
创建一个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>