脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 mapState,mapGetters和mapActions

vue3.0使用mapState,mapGetters和mapActions的方式

 更新时间：2022年06月24日 15:16:14   作者：一个写前端的  
这篇文章主要介绍了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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对vuex中mapState,mapGetters辅助函数封装

1. readonly API的使用

在我们传递给其他组件数据时，如果直接将响应式数据传递给子组件。子组件如果使用数据不规范，修改了父组件传进来的props值没有任何反馈。

// 父组件
// <ReadonlyChild :info="info" />
setup() {
    const info = reactive({
      name: "哇哈哈",
    });
    return {
      info,
    };
}
// 子组件
setup(props) {
    const onChangeInfo = () => {
      const info = props.info;
      // 修改父组件传来的props 没有任何反馈。
      info.name = "woowow";
    };
    return {
      onChangeInfo,
    };
}

开发中我们往往希望其他组件使用我们传递的内容，但是不允许它们修改时，就可以使用 readonly了。

// 父组件
// <ReadonlyChild :info="infoReadonly" />
setup() {
    const info = reactive({
      name: "哇哈哈",
    });
    const infoReadonly = readonly(info);
    const onChangeInfo = () => {
      // 在父组件中可修改info中的值，子组件依然可响应更新
      info.name = "父组件给你的值";
    };
    return {
      infoReadonly,
      onChangeInfo
    };
}
// 子组件
setup(props) {
    const onChangeInfo = () => {
      const info = props.info;
      // 此时修改props时，控制台会有一个警告：
      // Set operation on key "name" failed: target is readonly. 
      info.name = "woowow";
    };
    return {
      onChangeInfo,
    };
}

2. 响应式变量直接解构会失去响应性

将响应式变量直接解构会失去其响应性

const info = reactive({ age: 18 });
// 直接解构后 age 值失去响应性，当 onChangeAge 函数触发时，age值不在变，而ageRef 依然具有响应性
const { age } = info;
const { age: ageRef } = toRefs(info);
const onChangeAge = () => {
  info.age++;
};

3. watchEffect 清除副作用

watchEffect API 可自动收集依赖项，当依赖项改变时触发侦听器函数。当我们在侦听器函数执行额外的副作用函数，例如：发送网络请求时。每当依赖性项变更都会发起一个新的网络请求，那么上一次的网络请求应该被取消掉。这个时候我们就可以清除上一次的副作用了。

setup() {
    const count = ref(0);
    const onChangeCount = () => {
      count.value++;
    };
    watchEffect((onInvalidate) => {
      // 侦听器函数中需要发起网络请求，用setTimeout模拟
      const timer = setTimeout(() => {
        console.log("请求成功啦");
      }, 2000);
      // 在侦听器函数重新执行时触发onInvalidate函数
      onInvalidate(() => {
        // 在这个函数中清除请求
        clearTimeout(timer);
        console.log("onInvalidate 回调触发");
      });
      // 自动收集count的依赖
      console.log("count-在改变", count.value);
    });
    return {
      count,
      onChangeCount,
    };
  }

4. setup 函数访问Vuex中Store数据

4.1 使用mapState辅助函数

通常需要通computed函数来获取state中数据，并保存响应性。

setup() {
    const store = useStore();
    // 在setup中要获取store中的state。如果state非常多，无疑这样做很繁琐
    const uName = computed(() => store.state.name);
    const uAge = computed(() => store.state.age);
    const uHeight = computed(() => store.state.height);
    /**
     * 直接使用mapState辅助函数得不到想要的结果
     * 这样获取的storeState 是一个 { name:  function mappedState (){...}, age: function mappedState (){...}, height: function mappedState (){...} } 这样的对象
     */
    const storeState = mapState(["name", "age", "height"]);
    // 需要对返回值进行处理
    const resStoreState = {};
    Object.keys(storeState).forEach((fnKey) => {
      const fn = storeState[fnKey].bind({ $store: store });
      resStoreState[fnKey] = computed(fn);
    });
    return {
      uName,
      uAge,
      uHeight,
      ...resStoreState,
    };
  }

封装成hooks如下：

// useState.js
import { computed } from "vue";
import { useStore, mapState } from "vuex";
export default function useState(mapper) {
  const store = useStore();
  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() {
    // 数组用法
    const state = useState(["name", "age", "height"]);
    // 对象用法，可使用别名
    const stateObj = useState({
      uName: (state) => state.name,
      uAge: (state) => state.age,
      uHeight: (state) => state.height,
    });
    return {
      ...state,
      ...stateObj,
    };
  }

4.2 mapGetters 辅助函数的封装

其原理与mapState 函数封装类似

// useGetters.js
import { computed } from "vue";
import { mapGetters, useStore } from "vuex";
export default function useGetters(mapper: any) {
  const store = useStore();
  const storeGettersFns = mapGetters(mapper);
  const storeGetters = {};
  Object.keys(storeGettersFns).forEach((fnKey) => {
    const fn = storeGettersFns[fnKey].bind({ $store: store });
    storeGetters[fnKey] = computed(fn);
  });
  return storeGetters;
}

useState和useGetters两个函数相似度很高，在进一下封装

// useMapper.js
import { computed } from "vue";
import { useStore } from "vuex";
export default function useMapper(mapper, mapFn) {
  const store = useStore();
  const storeStateFns = mapFn(mapper);
  const storeState = {};
  Object.keys(storeStateFns).forEach((fnKey) => {
    const fn = storeStateFns[fnKey].bind({ $store: store });
    storeState[fnKey] = computed(fn);
  });
  return storeState;
}
// useState.js
import { mapState } from "vuex";
import useMapper from "./useMapper";
export default function useState(mapper) {
  return useMapper(mapper, mapState);
}
// useGetters.js
import { mapGetters } from "vuex";
import useMapper from "./useMapper";
export default function useGetters(mapper: any) {
  return useMapper(mapper, mapGetters);
}

4.3 对module的支持

useState 和 useGetters 函数暂时还不支持传入命名空间，进一步封装。 useMapper的封装保持不变。

// useState.js
import { createNamespacedHelpers, mapState } from "vuex";
import useMapper from "./useMapper";
export default function useState(mapper, moduleName) {
  let mapperFn = mapState;
  if (typeof moduleName === "string" && moduleName.length > 0) {
    mapperFn = createNamespacedHelpers(moduleName).mapState;
  }
  return useMapper(mapper, mapperFn);
}
// useGetters.js
import { createNamespacedHelpers, mapGetters } from "vuex";
import useMapper from "./useMapper";
export default function useGetters(mapper, moduleName) {
  let mapperFn = mapGetters;
  if (typeof moduleName === "string" && moduleName.length > 0) {
    mapperFn = createNamespacedHelpers(moduleName).mapGetters;
  }
  return useMapper(mapper, mapperFn);
}
// 在组件中的使用
// Home.vue
setup() {
  const state = useState(["homeCounter"], "home");
  const stateGetter = useGetters(["doubleHomeCounter"], "home");
  return {
    ...state,
    ...stateGetter,
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue2实现未登录拦截页面功能的基本步骤和示例代码

    Vue2实现未登录拦截页面功能的基本步骤和示例代码

    在Vue 2中实现未登录拦截页面功能,通常可以通过路由守卫和全局前置守卫来完成,以下是一个基本的实现步骤和示例代码,帮助你创建一个简单的未登录拦截逻辑,需要的朋友可以参考下
    2024-04-04
  • vue长列表优化之虚拟列表实现过程详解

    vue长列表优化之虚拟列表实现过程详解

    前端的业务开发中会遇到不使用分页方式来加载长列表的需求,下面这篇文章主要给大家介绍了关于vue长列表优化之虚拟列表实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue如何实现拖动图片进行排序Vue.Draggable

    vue如何实现拖动图片进行排序Vue.Draggable

    这篇文章主要介绍了vue如何实现拖动图片进行排序Vue.Draggable，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue.js中v-for指令的用法介绍

    Vue.js中v-for指令的用法介绍

    这篇文章介绍了Vue.js中v-for指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • Vue组件教程之Toast(Vue.extend 方式)详解

    Vue组件教程之Toast(Vue.extend 方式)详解

    这篇文章主要给大家介绍了关于Vue组件教程之Toast(Vue.extend 方式)的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • vue中组件＜router-view＞使用方法详解

    vue中组件＜router-view＞使用方法详解

    这篇文章主要给大家介绍了关于vue中组件＜router-view＞使用方法的相关资料,Vue 路由中的 <router-view/> 是用来承载当前级别下的子级路由的一个视图标签,此标签的作用就是显示当前路由级别下一级的页面,需要的朋友可以参考下
    2024-06-06
  • Vue使用自定义指令实现拖拽行为实例分析

    Vue使用自定义指令实现拖拽行为实例分析

    这篇文章主要介绍了Vue使用自定义指令实现拖拽行为,结合实例形式分析了Vue使用自定义指令实现拖拽行为具体步骤、原理与操作注意事项,需要的朋友可以参考下
    2020-06-06
  • vue解析Json数据获取Json里面的多个id问题

    vue解析Json数据获取Json里面的多个id问题

    这篇文章主要介绍了vue解析Json数据获取Json里面的多个id问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue实现文件上传和下载功能

    Vue实现文件上传和下载功能

    这篇文章主要为大家详细介绍了Vue实现文件上传和下载功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue组件从开发到发布的实现步骤

    vue组件从开发到发布的实现步骤

    这篇文章主要介绍了vue组件从开发到发布的实现步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论