您现在的位置是:网站首页> 编程资料编程资料
vuex学习进阶篇之getters的使用教程_vue.js_
2023-05-24
353人已围观
简介 vuex学习进阶篇之getters的使用教程_vue.js_
紧接上篇,本片主要讲讲vuex 中 getters的使用,示例中使用了vuex的modules,getters的使用与vue组件中computed中使用类似,再学习的过程中,注意举一反三
1.设置gettes 事件
index.js

dict.js

我们在index.js中设置了两个getters事件,在子模块dict.js中设置了两个getters事件
2.使用调用
-----------------------------------------------------------------------------{{ $store.getters.getterAge }}{{ $store.getters.getterAgeCompare(18) }}{{ $store.getters.getterAgeCompare(10) }}/{{ getterAge }}{{ getterAgeCompare(18) }}{{ getterAgeCompare(10) }}{{ $store.getters["dict/getterDict"] }}{{ $store.getters["dict/getterDictCompare"](1) }}{{ $store.getters["dict/getterDictCompare"](2) }}{{ $store.getters["dict/getterDictCompare"](3) }}/{{ getterDict }}{{ getterDictCompare(1) }}{{ getterDictCompare(2) }}{{ getterDictCompare(3) }}
3.最终页面示例

getters的优点:
此外,使用getters的好处还可以使代码更加简洁,对于获取同样的数据,直接调用同一个方法即可,不需要每个组件都单独写一遍函数,直接调用在getters写好的方法就可以。
总结
到此这篇关于vuex学习进阶篇之getters使用的文章就介绍到这了,更多相关vuex getters的使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- vue3使用echart的两种引入方式以及注意事项说明_vue.js_
- vuex新手进阶篇之actions的使用方法_vue.js_
- babel插件去除console示例详解_javascript技巧_
- vuex新手进阶篇之改变state mutations的使用_vue.js_
- vue3+ts+echarts实现按需引入和类型界定方式_vue.js_
- Vue收集依赖与触发依赖源码刨析_vue.js_
- Vue使用正则校验文本框为正整数_vue.js_
- Vue3组件挂载之创建组件实例详解_vue.js_
- Nodejs读取本地json文件,输出json数据接口方式_node.js_
- Vue数据变化后页面更新详细介绍_vue.js_
