VUE教程（第九节）

本来这次是需要进阶vue-router的，但考虑这是基础教程，说的太难很容易大家糊里糊涂的，在后期的实例案例才给大家进阶吧，这节课学习一下vuex，vuex是中央状态管理器，它存储这个整个项目的公共状态，它的出现极大的简化了数据的跨组件传输，我们之前学过组件的父子之间传输，如果是兄弟组件，如果是多层级的组件嵌套，那会更麻烦，所以就出现了vuex这么一个东东。举个栗子，我们都知道面包屑导航，一般这个在vue中是通过加载不同组件来进行页面切换，面包屑部分就可以用vue来实现吗，根据加载的组件，来显示不同的导航。好了，来个实例看看吧，学了不如会用，使用才是实现价值的唯一目的，先进行安装npm install vuex --save，就可以安装好vuex了：

目录结构.png

——》目录结构，我新加了个文件夹，store文件夹，里面有个index文件，我们就在这个文件里面编写vuex的代码：

store的index文件代码.png

——》我们看看index文件里面的代码，先引入vue和vuex，然后让vue使用vuex，定义出一个常量，new出vuex的store属性，里面有三个属性，其实vuex一共有五个属性，这里只介绍常用的三个就够了：

第一个是state，这个和vue的data是一个意思咯，就是定义参数，需要什么参数，直接定义出来就可以，我们这里定义了一个count，值为5；

第二个是getters，这个vuex的计算属性，就是根据vuex的值，延伸出来的值，这里我们让newCount的值是count的三倍；

第三个是mutations，这个就是vuex的方法，vuex的值是不能随便修改的，只能通过方法来进行修改，看到这里，开发过小程序的朋友一定很容易理解，小程序的值也是需要通多固定的API来进行修改的。这里定义了一个increment方法，这个方法的目的是为了让count每次都加一，好了，我们再看看如何挂载到vue里面去；

main文件代码.png

——》看一下main文件，先引入store文件，然后放到vue实例里面就搞定了，超级简单的，如何使用呢？我们看看我们的helloworld文件代码；

helloworld文件代码.png

这个文件代码比较多，我一个个解释，总的来说，我有三个目的，第一就是显示vuex的状态值，第二就是使用状态值，第三就是看看不同组件之间的状态值是不是同步；我在计算属性里面return出了vuex的count，这里想拿到vuex的值和调用vuex的内容必须是通过this.store.state.count罢了，这也是方便自己使用的，第二个我定义了一个方法，在点击方法的时候触发了vuex的方法，触发vuex方法的代码是this.$store.commit('increment');这样就能够改变vuex的值了，第三我引入了一个子组件child，回头我们在看看子组件的代码是怎么样的，最后一个是我们定义了当count的值大于或者等于9时候，就显示出我们要显示的内容；

child文件代码.png

——》在子组件里面我们将vuex的count和newCount的值都引入了，展示出来；

初始化效果.png

初始化时候，我们的值是5，newCount的值是15，是count的三倍，我们点击按钮，count的值变为9的时候：

现在我们看看效果：

点击到9时候的效果.png

所有值都是同步变化的，然后我们需要根据count大于等于9时候显示的值，现在也显示出来了。

好了，vuex就是这么简单的使用，看明白了有时候还是不够的，还是需要多敲，只有使用时检验价值的唯一标准，希望大家都学好技术，用好技术，今天的教程就到这里，喜欢我的朋友也可以关注我，期待与你一起进步。

公众号