终于有人可以将 Vue3《Vuex》说的如此直白

本文描述Vue3如何使用Vuex,vue2点这里

Vue2 vuex贯穿全局,通篇掌握_技术前端,忠于热爱-CSDN博客

 

目录

  语法糖 首次现身

  vue3 使用computed 取出vuex数据 

  Vue3 使用语法糖(mapState)取出vuex state的数据 

  Vue3 使用语法糖(mapGetters) 取出vuex getters的数据 

  Vue3 使用语法糖(mapMutations)取出vuex mutations的数据 

   Vue3 使用语法糖(mapActions)取出vuex actions的数据 


Vue3 的语法糖,可不是很简单,特别对于刚接触vuex的小伙伴儿。但本文是极简的,等熟练使用vue2中vuex语法,再看vue3的vuex使用方法也不会太晦涩,建议收藏备用!

先在store/index.js定义数据

终于有人可以将 Vue3《Vuex》说的如此直白_第1张图片

在页面使用 

终于有人可以将 Vue3《Vuex》说的如此直白_第2张图片 浏览器 效果

终于有人可以将 Vue3《Vuex》说的如此直白_第3张图片


 语法糖 首次现身

 哎!不想写这么长,那你用语法糖,(就可以不写$store.state.) 

需要引入useStore事例,因为没有this,建议在computed中取出vuex的数据,否则vuex数据就会失去相应式,

也就是说你用一个vuex的变量,就需要声明一个computed比较麻烦是吧 

配合下面图一起更容易理解

vue3 使用computed 取出vuex数据 

终于有人可以将 Vue3《Vuex》说的如此直白_第4张图片 


 那有没不写$store.state,< 又不用定义太多的computed >,可以使用语法糖,但是需要自己写循环函数,难度来啦

Vue3 使用语法糖(mapState)取出vuex state的数据 




 再配合图解必须学会vue3 vuex的语法糖

浏览器效果图  终于有人可以将 Vue3《Vuex》说的如此直白_第5张图片终于有人可以将 Vue3《Vuex》说的如此直白_第6张图片

 还是没明白,请揍我!


 Vue3 使用语法糖(mapGetters取出vuex getters的数据 

store/index.js 位置

终于有人可以将 Vue3《Vuex》说的如此直白_第7张图片




 浏览器效果图终于有人可以将 Vue3《Vuex》说的如此直白_第8张图片


 

  Vue3 使用语法糖(mapMutations取出vuex mutations的数据 

  终于有人可以将 Vue3《Vuex》说的如此直白_第9张图片






浏览器效果图:

终于有人可以将 Vue3《Vuex》说的如此直白_第10张图片

   Vue3 使用语法糖(mapActions取出vuex actions的数据 

两种触发方法,两种定义形式,学会则掌握雷电 !

 终于有人可以将 Vue3《Vuex》说的如此直白_第11张图片






 浏览器效果图

终于有人可以将 Vue3《Vuex》说的如此直白_第12张图片

 结语:希望大家都可以完美完成工作,早早下班,

 

你可能感兴趣的:(Vuex,前端,css3,javascript,vuex)