vue项目npm集成vuex

vuex是什么？直白点说，vuex就是专门为vue.js设计的全局变量管理插件，例如用户个人信息等。如想更深入了解vuex，请直接查看官方文档，话不多说，动手操作吧：

1.安装vuex：npm install vuex --save

2.创建store.js，为了后期进一步区分，我们可以在src下单独创建个目录

创建好文件，下面我们来对store进行初始化

3.初始化store：

一个简单而完整的store包含state，getters，actions，mutations四个部分：state就是你的全局变量存放处；getters读取全局变量，你可以通过this.$store.getters方法来读取，也可以通过mapGetters辅助函数来读取，当然你也可以不设置getters，直接通过this.$store.state属性来读取；actions一般用来处理业务逻辑，例如请求数据，然后提交mutation改变全局变量数据；mutations就是直接改变全局变量的

注：以上四部分可以放到不同文件去哦，具体操作以及更复杂的分块等可以自行研究~

4.一个简单的store初始化完成，那么我们如何使用呢，接下来继续：

首先我们在main.js中引入store：

下面我们来看下在实际使用中何获取、如何改变state的属性：

我们来看一下运行结果：

在devtools中我们可以看到，在这个过程中vuex做了如下操作：