封装一个hook，在Vue3 setup中使用Vuex中的mapState，mapGetters

在Vue3中没有很好的方法使用Vuex中的映射函数到setup中使用，一般就使用一种效率低一些的方法

setup(props, context) {const store = useStore();const name = computed(() => store.state.name);const age = computed(() => store.state.age);return {store,name，age};}

如果在setup中使用mapState映射函数将是以下效果

setup(props, context) {const store = useStore();const storestate = mapState(["name", "age"]);return {store,...storestate,};},

返回值是一个函数，页面也是呈现的是这个函数对象

我通过封装一个hook来解决这个问题

import { computed } from 'vue'
import { mapState, useStore } from 'vuex'export function useState(mapper) {// 拿到store独享const store = useStore()//此时得到的一个键值对的对象，对象的值是一个函数const StateFns = mapState(mapper)// 将数据绑定到对象中const storeState = {}Object.keys(StateFns).forEach(Key => {//需要注意的是这里需要帮函数显示绑定this，因为在setup中是没有绑定this的const fn = StateFns[Key].bind({$store: store})storeState[Key] = computed(fn)})return storeState
}

使用就直接导入hook

  import { useState } from '../hooks/useState'export default {setup() {const storeState = useState([ "name", "age"])return {...storeState}}}

mapGetters的hook封装也同mapState的hooke差不多

import { computed } from 'vue'
import { mapGetters, useStore } from 'vuex'export function useGetters(mapper) {// 拿到store独享const store = useStore()const StateFns = mapGetters(mapper)// 对数据进行转换const storeState = {}Object.keys(StateFns).forEach(Key => {const fn = StateFns[Key].bind({$store: store})storeState[Key] = computed(fn)})return storeState
}

使用

  import { useGetters } from '../hooks/useGetters'export default {setup() {const storeGetters = useGetters(["nameInfo", "ageInfo", "heightInfo"])return {...storeGetters}}}

封装一个hook，在Vue3 setup中使用Vuex中的mapState，mapGetters相关推荐

vue3中修改vuex中state中的数据
vue3中修改vuex中state中的数据 1.直接通过store.state修改如 : //vuex文件 import { createStore } from 'vuex' export def ...
封装一个uniapp的全局弹窗组件，vue中也可以使用，在任何页面都可以弹出
效果图: 场景: 当你对接websocket时,或者轮询也好,你需要获取到最新的信息,并且在任何页面弹出一个组件进行后续操作思路: 1.先封装好要弹出的公共组件 2.向vue原型上挂载全局方法,拿到 ...
四十二、开始Vuex的学习：如何在Vue中使用Vuex
@Author:Runsen @Date:2020/7/12 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
Vue3VideoPlay+vue3+ts封装一个视频播放组件
vue3+ts封装一个视频播放组件基于Vue3VideoPlay 做了常用的配置,复制即用! 官方文档https://codelife.cc/vue3-video-play/ 安装 npm安装: n ...
vue3+ts+element封装一个简易的curd
vue3+ts+element封装一个简易的curd 闲来无趣做一个简单的table封装,不喜勿喷首先创建一个公共的Table.vue/pagination.vue文件 Table.vue < ...
基于Vue3封装一个好用的Websocket
在Vue3中使用Websocket可以让我们轻松地实现实时数据传输.为了方便使用,我们可以封装一个好用的Websocket类. 安装依赖首先我们需要安装 ws 库来处理Websocket连接,使用以 ...
封装一个方法，找出数组中重复数大于n的元素集合
例如 [1, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4, 4],封装一个数组原型上的方法,方法返回重复数目大于2 的子元素集合,结果为[1, 2, 3] 初看并不难,循环一下就可以搞 ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
vue3 + antd + typeScript 封装一个高仿的ProTable
前言阿里的antd组件说实话真的非常完善了,可是vue版的寥寥无几,vue3的更少了,今天有空就封装一个高仿的ProTable 开始其实很简单的,我们是基于vue版的antd进行二次封装,我们把表 ...

封装一个hook，在Vue3 setup中使用Vuex中的mapState，mapGetters

在Vue3中没有很好的方法使用Vuex中的映射函数到setup中使用，一般就使用一种效率低一些的方法

如果在setup中使用mapState映射函数将是以下效果

返回值是一个函数，页面也是呈现的是这个函数对象

我通过封装一个hook来解决这个问题

使用就直接导入hook

mapGetters的hook封装也同mapState的hooke差不多

封装一个hook，在Vue3 setup中使用Vuex中的mapState，mapGetters相关推荐

最新文章

热门文章