Vue2向Vue3过度Vuex核心概念getters 朱雀 2024-03-24 21:52 106阅读 0赞 #### 目录 #### * * 1 核心概念 - getters * * 1.定义getters * 2.使用getters * * 2.1原始方式-$store * 2.2辅助函数 - mapGetters * 2 使用小结 -------------------- ### 1 核心概念 - getters ### ![在这里插入图片描述][4f84b6d2bb5b47188c84bd012a823423.png] > 除了state之外，有时我们还需要从state中**筛选出符合条件的一些数据**，这些数据是依赖state的，此时会用到getters 例如，state中定义了list，为1-10的数组， state: { list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] } 组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它 #### 1.定义getters #### getters: { // getters函数的第一个参数是 state // 必须要有返回值 filterList: state => state.list.filter(item => item > 5) } #### 2.使用getters #### ##### 2.1原始方式-$store ##### <div>{ { $store.getters.filterList }}</div> ##### 2.2辅助函数 - mapGetters ##### computed: { ...mapGetters(['filterList']) } <div>{ { filterList }}</div> ### 2 使用小结 ### ![在这里插入图片描述][d18197a16e3b41daa70a1846a8326ff3.png] [4f84b6d2bb5b47188c84bd012a823423.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a4b29bfa086c4e33bb056196688d7164.png [d18197a16e3b41daa70a1846a8326ff3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/4ad46ba520ff47ab8b6294dfa3376fc5.png
相关 Vue2向Vue3过度Vuex核心概念getters 目录 1 核心概念 - getters 1.定义getters 2.使用getters 朱雀/ 2024年03月24日 21:52/ 0 赞/ 107 阅读
相关 Vue2向Vue3过度Vuex核心概念actions 目录 1 核心概念 - actions 1.定义actions 2.组件中通过dispatch调用 2 妖狐艹你老母/ 2024年03月24日 21:52/ 0 赞/ 88 阅读
相关 Vue2向Vue3过度Vuex核心概念mutations 目录 1 核心概念-mutations 1.定义mutations 2.格式说明 3.组件中提 绝地灬酷狼/ 2024年03月24日 21:51/ 0 赞/ 90 阅读
相关 Vue2向Vue3过度Vuex核心概念module模块 目录 1 核心概念 - module 1.目标 2.问题 3.模块定义 - 准备 state 深碍√TFBOYSˉ_/ 2024年03月24日 21:51/ 0 赞/ 80 阅读
相关 Vue2向Vue3过度Vuex核心概念state状态 目录 1 核心概念 - state 状态 1.目标 2.提供数据 3.访问Vuex中的数据 阳光穿透心脏的1/2处/ 2024年03月24日 21:51/ 0 赞/ 87 阅读
相关 Vue2向Vue3过度核心技术综合案例 目录 1 面经基础版-案例效果分析 1.面经效果演示 2.功能分析 3.实现思路分析：配置路由 曾经终败给现在/ 2024年03月24日 21:50/ 0 赞/ 95 阅读
相关 Vue2向Vue3过度核心技术插槽 目录 1 插槽-默认插槽 1.作用 2.需求 3.问题 4.插槽的基本语 Love The Way You Lie/ 2024年03月24日 21:48/ 0 赞/ 84 阅读
相关 Vue2向Vue3过度核心技术生命周期 目录 1 Vue生命周期 2 Vue生命周期钩子 3 生命周期钩子小案例 1.1 在created中发送数据 小灰灰/ 2024年03月24日 21:35/ 0 赞/ 83 阅读
相关 Vue2向Vue3过度核心技术watch侦听器 目录 1 watch侦听器 1.1 作用： 1.2 语法： 1.3 侦听器代码准备 以你之姓@/ 2024年03月24日 21:33/ 0 赞/ 59 阅读
朱雀
妖狐艹你老母
小灰灰
还没有评论，来说两句吧...