VueX学习

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中的方法名相同