vue-cli中配置使用Vuex

前言

    在vue开发用我们常常会用到一些全局的数据，比如用户信息、用户权限、一些状态等等。我们传统的数据都是单向的，所以我们得一层一层的传递，这样我们遇到一个多组件共享一个数据的时候，单向的这个数据就很难以维护，比如一个组件嵌套很多层但是，数据改变方法就得一层一层的传递。这时候我们就可以引入了vuex。

    vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

如下图就是vuex官网中管理组件间一个共享状态的流程图

安装使用

我们之间在我们初始化的vue-cli的项目中之间使用npm或者yarn进行一个安装就可以了.

npm install vuex --save // yarn add vuex
复制代码

然后我们进行管理我们的状态，在根目录下src文件中新建一个store文件夹然后在store下建立index.js作为入口文件，然后写入我们的一个全局状态。

这里的state作为全局的状态，getters是可以作为我们派生出来的一些状态，例如需要对state中count进行相除操作，然后mutations就是改变state的状态的方法第一个参数是我们的state的Object然后第二个参数是可以我传入的值。最后这里的actions是提交mutation的而不是直接变更状态这里的action是可以是异步函数。action中的函数第一个参数接收一个与store实例先沟通呢的方法和属性的context函数， 第二个可是我们传入的。

在页面中使用state以及通过getter派生出来的state和通过action派发更改state数据

这里我通过vuex中mapState、mapGetters、mapMutations、mapActions的方式引入想对应state、getter派生数据，mutation、action，然后我就直接可以再vue实例上使用了。当然也可以直接引入我们定义的store通过store实例上的获取我们想要的state、action、mutation。

效果如下所示