首页 > 其他 > 详细

学习vue必备技能vuex

时间:2018-04-11 17:47:15      阅读:315      评论:0      收藏:0      [点我收藏+]

首先我们先用vue-cli搭建项目,安装vuex,安装依赖(这里不一一讲解),然后在src下建立/vuex/store.js,里面代码截图

技术分享图片

最简单的引入vue,引入vuex,定义两个对象,一个state(数据状态),一个mutations(改变数据方法),最后export,因为我们别的地方要用

,比较简单的一个实例,也是比较经典的实例,点击加减改变state里面的值,

技术分享图片

红色部分是比较麻烦一点的写法,但是比较容易理解,下面inport之后,我们直接在页面上显示和这个{{  }}类似,

然后commit("fun");fun是mutations里面的方法,比较简便一点的写法如下,通过计算属性:

技术分享图片

最后一个是最简单的方法,就是引用vuex里面的mapState和mapMutations,代码如下:

技术分享图片

和我们平时写的几乎一样了吧!直接写方法名称就ok了,但是还有一个问题就是传参到Store.js里面如红色箭头部分,

个人理解,maoState和mapMutations分别对应vue实例里面的计算属性computed和methods,如上图下面的框内所示,

接下来待分享 vuex里面的getter、action、module,(待续),我的微信是

技术分享图片

欢迎一起技术探讨学习!

学习vue必备技能vuex

原文:https://www.cnblogs.com/JeneryYang/p/8796967.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!