在setup中使用mapState

首先新建一个hooks文件夹在文件夹下新建一个usestate.js

import { computed } from "vue";
import { mapState, useStore } from "vuex";export function useState(mapper) {// 拿到store对象const store = useStore()// 获取到对应的对象的functions:{name:function,age:function}const storeStateFns = mapState(mapper)// 对数据进行转换const storeState = {}Object.keys(storeStateFns).forEach(fnkey => {const fn = storeStateFns[fnkey].bind({ $store: store });storeState[fnkey] = computed(fn)})return storeState
}

组件中使用时

先引入：

import { useState } from '../hooks/useState'

setup中：

setup(){const storeState=useState(["counter","name","age"])const storeState2=useState({sCounter:state=>state.name})return{...storeState,...storeState2}}

在setup中使用mapState相关推荐

vue3 在setup中使用mapState
mapState和computed结合在Vue3版本中使用,广大网友写了很多,这里只做一个实战后的应用笔记,不多赘述创建一个hook hooks/useMapState.ts import { co ...
封装一个hook，在Vue3 setup中使用Vuex中的mapState，mapGetters
在Vue3中没有很好的方法使用Vuex中的映射函数到setup中使用,一般就使用一种效率低一些的方法 setup(props, context) {const store = useStore();c ...
setup中如何使用mapState
着急的同学可以直接查看文末的最终版本以及使用说明推演过程优化 vuex的模块化最终版本使用说明小结推演过程 vuex提供了mapState.mapMutations-辅助函数,让我们能够方 ...
在 Inno Setup 中实现倒数N秒后激活按钮
在 Inno Setup 中实现倒数N秒后激活按钮原文 http://restools.hanzify.org/article.asp?id=67 timectrl.dll 为一个 6.5 KB 的 ...
Vue3里的setup中使用vuex
useStore 这里我们可以直接从vuex 4.X中解构出useStore方法,就可以在setup中使用vuex的相关函数 template 使用$store <template>< ...
Vue3 Composition API（二）——computed、watchEffect、setup中使用ref
一.computed 在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理在前面的Options API中,我们是使用computed选项来完成的: ...
使用customRef自定义ref，解决setup中处理异步问题。
setup中不允许使用async.await使用customRef可以让请求到的数据自动获取响应式状态详见下方demo <template><div>{{ num }}< ...
vue3 setup中父组件通过Ref调用子组件的方法
在setup()钩子函数中调用父组件 <template><div>我是父组件<children ref="childrenRef" />&l ...
setup中使用watch
watch属性监听器的作用在vue3.0中没有改变,还是监听值得变化. 在vue3.0中,仍然支持watch配置项.但是我们要在setup中使用watch得话,我们要导入watch的API,然后往wa ...

在setup中使用mapState

在setup中使用mapState相关推荐

最新文章

热门文章