vuex中state、mutation的简单使用

在vue中我们经常要在组件中进行传值，如果组件中嵌套的层次比较多的时候咱可能就要使用vuex进行传值了。好了，我们来实现一个简单的登录功能来看一下如何使用vuex吧。
vuex官方文档中给我们提供的有五大核心概念：state、getter、mutation、action、module。state用来存放数据，getter跟computed类似可以对数据进行一些处理，mutation主要用来变更状态，action不直接更改状态，在里面可以使用任意异步操作，平常我们不做多人开发的时候可以先不用考虑使用module。
我们先通过vue-cli脚手架创建一个vue项目，在这里我使用的是vue-cli@4版本，选用的default默认，创建出来的目录结构为：

默认的结构中是没有vuex的，我们需要自己手动安装

npm install vuex

接下来我们在src目录下创建一个文件夹store，这个store就是我们使用vuex对数据的一些处理。在store中需要创建一些文件，state.js存放数据

mutations.js进行更改数据，这里面写的方法带有两个参数，第一个参数代表state.js中存放的初始数据，第二个参数代表提交过来的数据

创建一个index.js实例化vuex的对象

创建完成后在main.js里进行引入

接下来更改一下项目中自带的一个Helloworld.vue文件

在这里我们可以通过this.$store.state获取初始值，我们设置的初始值为XXX，现在显示的也是XXX没有问题。我们通过userLogin方法来更改一下state中的初始值，刚刚已经在mutation里面写了login方法，所以通过commit提交到mutation更改状态就可以了

ok，通过这个登录功能咱们简单的能够使用vuex。在这个小案例中只使用了state、mutation，action、getter的使用大家可以下去看一下，等下次我们再说~