1.安装
npm install --save vuex
2.网站:Vuex官网
3.应用区域
开发大型单页应用
4.使用
(1)项目结构
因为是演示,所以就把actions等写到了一个store中
也可以参考官方给的项目结构
(2)大概流程
通过(1),我们在src下创建了一个store.js,下图就是store.js整体架构
通过export一个Vuex.Store对象,对象中含有四个属性来实现
然后在main.js中为vue添加这个store对象
这样Vue中就多了一个$store对象.我们就可以在App.vue中使用$store对象来处理数据了.
(3)具体的关联
①例如在store.js中的state(ps:坑1:注意这个不是number=0,而是number:0)
有个number,我们就可以在App.vue中拿到,通过配置好的store对象
②getters代替了Vue的computed方法,这是一个判断奇偶的代码(坑2:注意这里传了一个参数state来去了state里的值,这样写就行,它就类似与事件回调函数默认就带一个event对象是的)
我们就可以在App.vue中拿到
③看一下官方的一个图,也许看不懂,就直接看下面也行
这张图就讲解了用户修改界面后怎么发生改变,数据怎么变动的.然后结合以下具体代码
用户点击按钮,按钮触发事件increment
按钮事件被触发调用了$store的一个方法dispatch传递了一个参数(再看官方的图!!!!是不是有个一样的Dispatch)
其实就是dispatch('increment')就是调用$store下的actions的increment方法
坑3:这个increment的参数是一个对象是有{}的!!!!!然后参数也不用你传,还是类似事件回调函数的event对象
这里说一下commit与state,commit这个就是commit()用于提交,而因为actions可以处理一些复杂业务,因此state就是从state中拿数据的
例如state.number就拿到了state中的number
然后就调了commit方法,就是参数中的那个方法.然后commit到了哪里?(再看官方图,有一个一样的commit)
其实就到了mutations,进行具体的数据处理
(3)简化编写(嗨的飞起)
简写一般都需要把App.vue与store.js中对应的对象的名称要相同,如evenOrOdd
1)在App.vue中引入
mapState与mapGetters在computed中使用
然后页面代码就可以使用不用$store.xxx的前缀了,就等于return了一个$store.xxx
mapActions在methods中使用,这里要注意坑4:我们的事件回调方法名最好与store.js中的actions中的方法名相同