Vuex使用方法，解析，图解，保姆级指引

最近写项目，老是搞不明白vuex，所以翻看了官方文档，和很多资料，现在总结一下结果：

vuex是什么？

vuex是一个专门为vue.js应用程序开发的状态管理模式
vuex是单向数据流的一种实现

你可以把它想象成把data里面的属性，数据，放到一个公共的文件内，提供给其他组件使用。所以它就是我们需要共享的data，使用vuex进行统一集中式的管理

一. vuex中，有默认的五种基本对象：

• state：存储状态，驱动应用的数据源 （this.$store.state.xxx)
• getters：从现有的数据获取新的数据 （this.$store.getters)
• actions: 异步操作（ajax，定时器）
• module：模块
• mutations：修改状态，是同步的

二. Vuex和单纯的全局对象有两点不同：

1.Vuex的状态存储是响应式的，当Vue组件从store中读取状态时候，若store中的状态发生变化，那么相应的组件也会相应的得到高效更新

2.你不能直接改吧store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation

这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好的了解我们的应用

三. 介绍完毕，开始使用vuex

1.先全局安装一个插件

npm i -g @vue/cli-g  //安装vue脚手架

2.然后执行创建命令，创建一个叫vuex的项目，并选择vue2

vue create vuex

3.进入项目

cd vuex  //进入项目
npm run serve  //启动项目
 

 4.进入项目目录src，在src目录下创建一个vuex文件夹，并在文件夹下创建一个store.js文件

 5.这个时候我们就可以引入vuex

 6.安装完成vuex后，在store.js文件中，引入我们安装的vuex，并创建一个数据

 7.使用之前还需要在全局的main.js中引入store

 8.现在我们就可以去任意一个组件中使用这个数据了

 9.最基本的数据公用和获取已经做完了

总结：只需要下载安装vuex，然后在定义的store.js中定义state对象，在把他暴露出去，再然后去main.js中使用store.js，就可以做到全部组件都能获取这个数据了

10.state已经使用完毕，现在我们来试试mutations

在store.js中创建mutations对象

 在app.vue中使用这个方法

 

实现了加减 

11.下面来试试actions，也就是异步操作

在store创建actions对象

 在app中引用

12.最后就是getters

一般使用getters来获取我们的state，因为它算state的一个计算属性