Vue2向Vue3过度Vuex核心概念getters 朱雀 2024-03-24 21:52 38阅读 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
还没有评论,来说两句吧...