Vuex用法详情

先介绍一下vuex：vuex是vue.js中用来做状态管理的一个插件，可以解决组件与组件之间通讯问题,然而之前我们也可以通过bus事件总线来解决，但是一旦项目大了，这种办法就会变得很复杂，不便于代码管理。所以作者为我们提供了这么一个仓库机制的插件。

目录：

1、获取state状态
2、mutation修改state状态
3、异步操作action
4、mapState
5、getters
6、mutation管理方法
7、es6动态属性名语法

一、首先，我们搭建好Vue-cli创建好项目，在创建的时候可以选择使用vueX，如果没有选，则可以通过命令npm install vuex --save进行安装。
在我们的仓库文件中，结构如下：

其中，state是存放状态的地方，和原来的data一样，mutations是唯一修改状态的地方，actions是做异步处理的地方。

此时，我们在state中定义一个isTabbarShow的状态,如下图：

然后可以通过直接通过this.$store.state.isTabbarShow拿到这个状态，如下图：

到此时，你已经成功的获取了仓库里面的状态了。

二、如果，你想要改变状态，不能直接对this.$store.state.isTabbarShow赋值，而是通过提交一个mutation来改变。

如下图，我们在通过commit来提交这个mutations,并传递一个参数


在mutations中，我们定义这个动作，并传入两个参数。state:上面的整个state对象（因为状态在它里面）,data:传过来的参数（在这里是false），然后在里面修改状态。

至此，你已经可以获取和修改仓库中的值了。

三、如果你想要在你的页面中发送异步请求，那么请看下面。

如下图，我们通过this.$store.dispatch()来发送了一个动作

当我们页面中利用dispatch分发了一个getdataList的动作后,我们在actions里面就可以来定义这个动作了。可以看到，当我们用axios发送请求过后，我还是没有直接将返回的数据进行一个赋值操作，而是通过store.commit来提交一个mutation,并将请求回来的值也一并传过去，最后再mutations中来修改这个状态

到这儿，vuex的基本操作就介绍完了，如果你还想要更炫酷的操作，请接着往下看：

四、看完上面的操作，你会不会觉得this.$store.state太复杂了呢？其实是有更方便的方法的，如下所示：

首先，导入mapState这个方法，mapState相当于就是state的映射，想象一下数组的map方法你就懂了

然后，在计算属性中，我们使用mapState获取到isTabbarShow的状态，并通过ES6的语法扩展运算符，将返回的对象展开，便于computed中的继续定义。

至此，mapState的用法就介绍完了。下面我们再介绍一个新玩意儿getters，你可以把他理解为store的计算属性

五、想象一下，我们请求回来的数据需要在多个地方渲染，但是，并不是每个地方渲染的条数都一样。那么我们不妨看看下面这种方法。
我们在仓库的文件里，新增一个getters对象，在里面我们将dataList的数据过滤了一遍，只要前三条数据

接下来，在页面当中我们这样来使用

至此，getters就介绍完了。

六、最后再说一点，就是如果在多人开发的时候，mutation管理起来比较混乱，所以我们有了下面这种办法：
首先，在项目中新建一个文件夹，然后建一个js文件

在里面通过如下方式定义mutation

在仓库文件中导入

然后在mutations中使用,如下图所示：

可能有小伙伴不理解[HIDE_TABER]这种写法,那下面我再科普一下。

七、其实，它是ES6的动态属性名语法，你可以把它当成一个变量来对待。

我们看下面这个例子，如图所示：

它打印出来的结果，可以看到obj对象当中的name还是name

如果想要改变这个name的值，可以这样做，如下图所示：


好了，到此vuex的用法就介绍的差不多了，希望各位小伙伴补充不足的地方。