vue3在setup中怎么使用mapState
这篇文章主要介绍“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>
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码