Vuex的使用详解及理解

一、vuex的理解

        vuex简单说就是全局状态管理的，项目中常常需要有几个参数所有组件都要用，或者同级组件之间的数据传递和通信。此时使用vuex非常方便开发。

二、前期准备

1.下载vuex-------------------npm install vuex

2.在src文件夹----->新建store文件夹--------->新建index.js文件

3.在main.js里面引入store并全局注入

所有组件里面使用this.$store了。到此，准备工作已经完成。

三、VUEX的使用

1.在index.js里面的store里面写入三个对象，state,action,mutations。state用于定义状态，action异步更新状态，mutations同步更新状态。

下面，我们先来实现一个最简单的vuex。

好，定义好更新的函数了，我们在组件里面用dispatch将数据保存到vuex的状态里面。

有没有觉得框中这俩函数看着是不是和actions两个函数名是一样的，没错，通过dispatch调用actions中的同名函数，并把变量name中的数值传给action,很像函数调用有木有，然后action的函数里用commit调用，触发mutations,发现没有，commit里面的函数名又和mutations是一样的，触发mutations后又将action的name数据传给mutations了，mutations给保存到vuex的状态里面了。

2.既然vuex里面有数据，那么我要在另一个组件中怎么拿道vuex里面的状态呢？很简单。

额，这样就算是把状态从vuex给巴拉下来了。通过this.$store.state就可拿到状态了。

现在真是体会到创作不易了，艾玛，写的还挺累，各位看官看明白了吗？这是最简单的使用了，下期更新有getters和computed的vuex。