vue3.0下如何使用mapState，mapGetters和mapActions

1、新建useMapper.js
2、新建useState.js
3、新建useGetters.js
4、新建useActions.js
5、页面中使用

vue2.0中使用mapState及mapActions的方式

// 使用mapState
computed: { ...mapState({ //... })
}methods: {...mapActions(['fnA', 'fnB'])
}

vue3.0中获取state和使用actions的方式

import {computed} from 'vue'
import {useStore} from 'vuex'setup() {const store = useStore();const stateA = computed(() => store.state.stateA);const stateB = computed(() => store.state.stateB);const methodA = store.dispatch('methodA', {name: '张三'});
}

那如何才能在vue3下使用mapState这些api呢？

答案是封装mapState，mapGetters，mapActions方法。

1、新建useMapper.js

import { useStore } from 'vuex'
import { computed } from 'vue'export function useStateMapper(mapper, mapFn) {const store = useStore();const storeStateFns = mapFn(mapper);const storeState = {};Object.keys(storeStateFns).forEach(fnKey => {// vuex源码中mapState和mapGetters的方法中使用的是this.$store,所以更改this绑定const fn = storeStateFns[fnKey].bind({ $store: store });storeState[fnKey] = computed(fn)})return storeState
}export function useActionMapper(mapper, mapFn) {const store = useStore();const storeActionsFns = mapFn(mapper);const storeAction = {};Object.keys(storeActionsFns).forEach(fnKey => {storeAction[fnKey] = storeActionsFns[fnKey].bind({ $store: store })})return storeAction
}

2、新建useState.js

import { mapState, createNamespacedHelpers } from 'vuex'import { useStateMapper } from './useMapper'
import {checkType} from './index'
/*** * @param {*} moduleName 模块名称* @param {*} mapper state属性集合 ['name', 'age']* @returns */
export function useState(moduleName, mapper) {let mapperFn = mapState;// 如果使用模块化，则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapState方法if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {mapperFn = createNamespacedHelpers(moduleName).mapState}return useStateMapper(mapper, mapperFn)
}

3、新建useGetters.js

import { mapGetters, createNamespacedHelpers } from 'vuex'import { useStateMapper } from './useMapper'
import {checkType} from './index'
/*** * @param {*} moduleName 模块名称* @param {*} mapper getters属性集合 ['name', 'age']* @returns */
export function useGetters(moduleName, mapper) {let mapperFn = mapGetters;// 如果使用模块化，则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapGetters方法if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {mapperFn = createNamespacedHelpers(moduleName).mapGetters}return useStateMapper(mapper, mapperFn)
}

4、新建useActions.js

import { mapActions, createNamespacedHelpers } from 'vuex';
import {useActionMapper} from './useMapper'
import {checkType} from './index'
/*** * @param {*} moduleName 模块名称* @param {*} mapper 方法名集合 ['fn1', 'fn2']* @returns */
export function useActions(moduleName, mapper) {let mapperFn = mapActions;// 如果使用模块化，则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapActions方法if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {mapperFn = createNamespacedHelpers(moduleName).mapActions}return useActionMapper(mapper, mapperFn)
}

5、页面中使用

<template><div class="home"><span>姓名：{{name}} 年龄：{{age}} 性别：{{sex}}</span><button @click="changeName">改名</button></div>
</template><script>
// @ is an alias to /src
import {useState} from '@/utils/useState'
import {useActions} from '@/utils/useAction'
export default {name: "home",setup() {const storeState = useState('home', ['name', 'age', 'sex'])const storeActions = useActions('home', ['setName'])const changeName = () => {storeAction.setName('李四')}return {changeName,...storeState,...storeActions};},
};
</script>

vue3.0下如何使用mapState，mapGetters和mapActions相关推荐

vue——vuex mapState,mapGetters,mapMutations,mapActions
当多次获取state中的数据时会出现大量的 $store.state.属性名造成代码的冗余同时也很麻烦.就可使用 mapState(引用时使用的名称,'state中的属性名') 或 mapState ...
Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex 什么时候需要使用? 状态(数据)共享! vuex工作原理搭建vuex环境创建文件 src/store/index.js//全局安装[--save生产环境] npm install -g ...
[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
【笔记整理】vuex介绍和原理以及mapState与mapGetters、mapActions与mapMutations
vuex 理解Vuex 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组 ...
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
mapState 和mapGetters 用于生成计算属性computed mapState({"计算属性名":"State数据","xxx" ...
mapState mapGetters
1. mapState方法:用于帮助我们映射state中的数据为计算属性 computed: //借助mapState生成计算属性: sum. school. subject (对象写法)... ma ...
Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
Vuex 提供了 mapState.mapGetters.mapActions 和 mapMutations 四个函数,其返回结果分别是 mappedState,mappedGetter,mapped ...
Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载详细过程
Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载 1.Vue-cli 3.0 + cesium 构建参考资料地址Vue-cli 3.0 + cesium 构建注意,因为文档中设置默认 ...
Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）
有时候会遇到点击目标区域绑定事件 / 展示效果,然后点击目标区域之外的地方就关闭效果 / 触发另一事件,为了实现这样的功能,我们需要通过比对 node 节点来进行判断,在下面我会使用 Vue3.0 的 ...

vue3.0下如何使用mapState，mapGetters和mapActions

vue3.0下如何使用mapState，mapGetters和mapActions

1、新建useMapper.js

2、新建useState.js

3、新建useGetters.js

4、新建useActions.js

5、页面中使用

vue3.0下如何使用mapState，mapGetters和mapActions相关推荐

最新文章

热门文章