一:细讲store仓库的四个方法actions(),mutations(),state(),getters()
step1:大致结构
安装vuex3版本
命令行npm i vuex@3
step2:在main.js中:
step3:
step3:
step4:
总结上述是可以访问到store仓库中state的数据 。
**********************************************************************************************************
step5:
step6:
step7:
1>测试一下加2
2>成功了:
总结上述是可以访问仓库中actions和mutations的方法。
************************************************************************************************************
step8:
step9:在store文件夹下的index.js中
在App.vue中:
step10:最终效果的展示:
**************************************************************************************************************
二:细讲_mapState与mapGetters
step1:之前的写法太复杂了。用计算属性computed()来简写
step2:利用mapState和mapGetters写法简化计算属性
1>mapState和mapGetters的对象的写法:
2>mapState和mapGetters的数组的写法:
总结:
***********************************************************************************************************
三:mapActions和mapMutations方法的使用:
step1:mapActions的步骤
step2:效果图:
***********************************************************************************************************
step3:mapMutations的步骤,补上减的效果
step4:效果图:
step5:
总结:mapActions用的多,mapMutations使用的少一些。