Vuex精讲

一：细讲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使用的少一些。