vuex的使用

vue现在越来越火，不单单可以写简单的小项目，也可以写大中型的项目。但是项目大了，项目之间的数据传递就会变得复杂，那么问题来了？在一个大型项目中，多个组件要公用同一个或多个数据，我们如何保证每个组件获取到的数据都是预期对的值呢？这就要用到vuex了。

学习一样新的东西，我的学习思路一般有三步：

1、它是什么？

2、它是做什么的?

3、它有什么用处？

下面，我们就按照以上三点，来学习一下vuex。

一、vuex是什么

vuex是一个专门为vue.js设计的集中式状态管理架构。如果不明白这句话，我们做一个比喻，首先我们设置一个情景：有一个村子，村子里有5户普通人家和一户村长家，村长负责管理村子里所有的粮食，每次有人家要吃饭，这家人都要先告诉村长，我们这次需要吃多少斤，然后村长称出等量的粮食交给要吃饭的这家人。这样，村长随时都知道村里粮食有多少，但是，如果突然又搬来了几十户人家，每家每次吃饭都要这样村长会很麻烦，所以呢，村长就想出一个办法，在村子里建一个仓库，把村子里所有的粮食都放进仓库里，有哪家人要吃饭了，就自己到仓库里去取，这样，村长就不用那么累了。在这个例子里，一个村子就是一个vue项目，村长就是项目的一个父组件，5户普通人家就是5个子组件，他们吃的粮食就是组件之间共同的一个数据，那么那个存放粮食的仓库就是我们所说的vuex架构。所谓的状态自然就是公用数据的状态了。简言之就是把多个组件公用的数据放到一个公用的仓库去管理，这样说不知道会不会好理解一些。

二、vuex是做什么的

就像上面的例子所描述的，vuex就是一个专门管理vue项目数据的一个架构，它的工作就是定义并初始化所有公用数据、定义对数据的同步和异步操作。如果有组件要使用这里的数据，直接调用定义好的操作方法即可。

三、vuex有什么用

之前我们说如果项目较大，数据传递复杂的情况下，我们可以使用vuex来同意管理数据状态。它的作用就是将项目的公用数据及对数据的操作封装到一个单独的管理器中，这个管理器只定义对数据有关的操作，不包含其他任何与dom或与数据无关的代码。所以从数据管理的角度来说，vuex使得数据管理更加方便明了，从使用数据的组件角度来说，也更方便快捷，如果想使用数据了，那么我直接引入并调用vuex给定的操作方法，使程序代码可读性更强。

好，大体了解了vuex之后，我们就要看看怎么使用vuex吧！

第一步：安装

npm install vuex --save

第二步：定义路径，填写内容

以上目录是我在一个项目中用到的，

state用于记录state数据的状态

mutations用于定义数据的同步操作

mutation-types用于映射mutation的操作， 存储mtation操作的相关常量（名）

gettesr用于获取state中数据的状态

actions用于定义对mutation的封装或对数据的异步操作

index.js是vuex的入口文件，其他操作文件都要在这里引入，并赋值给store实例

注意：这里在引入vuex后一定要加入这句话：Vue.use('vuex')

第三步：在main.js中引入：import store from './store'

然后挂在到vue实例上：

最后：使用

在组件中用vuex提供的语法糖mapActions，mapGetters，mapMutations等引入store方法并调用

vuex的使用到此就结束了，另外需要注意两点：（一）vuex适用于中大型vue项目，小的项目，数据操作简单的就没必要使用vuex了

（二）一个应用只能有一个store实例，这个store实例要统一管理应用所有公用的数据

好了，今天就写这么多，以上都是我在写项目的时候自己的总结，如果有什么不足之处还请各位大神指正，另外别忘记关注我哦，后续还有更多知识分享，谢谢