首先，上简介：
Vuex是一个专为Vue.js应用程序开发的‘状态管理模式’，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
最实在的事情不过就是举例了：
假设你有几个数据，几个操作，在多个组件上都需要使用，如果每个组件都去掉用都去写，就会很麻烦，代码真的是又臭又长，当然，如果没有大量的操作和数据需要在多个组件内使用的话，其实也就可以不用这个vuex了，这个东西看个人吧！
重点来了：
1.首先为了项目格式便于维护和相对规范一点，我们先在目录下建立一个store文件夹，并且在下面建立一个store.js文件：
2.简单明了，先引入Vue和Vuex并且别忘了Vue.use(Vuex)；
当然你Vuex首先得跟main.js扯上点关系吧，下图main.js中的波浪线不用注意哈，这是我随手新建了个文件，这里不影响哈，不要被它吓着；
=》引入store文件 =》并且Vue实例上得将挂载store,这下就ok了，咱们继续
然后我们就该开始编写我们的vuex业务代码了，那么，有一个问题，我们的数据如何保存？
3.现在开始Vuex的主宰部分new Vuex.Store({})****
在这个图里咱们可以看到new Vuex.Store里面有一个state:{}注释也写了，
这是你要设置的全局访问的state对象，也就是你需要count就丢个count进去，需要price就丢个price进去
这里我丢了个 count 和 ChangeShowCom 两个不同的数据类型 作为一个对比。
4、如何在页面中获取 state 里面的 数据呢？
通过 this.$store.state.count 可以拿到 state里面的 count 也就是0，话不多说，看看吧
5、getters =》getters 和 组件的 computed 类似，方便直接生成一些可以直接用的数据。当组装的数据要在多个页面使用时，就可以使用 getters 来做。
注释也写了，getters 可以实时监听state值的变化(最新状态)
我给getters里面获取count值的方法命名为 getCount 并且需要传入 state
那么如何获取 通过 getters 获取 承载变化的 count 的值呢？
this.$store.getters.getCount 具体效果在 第4 栏里面有些，这里就不作重复了。
6、那么， 我们如果想改变 count 的值，应该怎么做呢？ 这时候就可以用到 mutations 。
要修改store中的值唯一的方法就是提交mutation来修改，我们现在Hello World.vue文件中添加两个按钮，一个加1，一个减1；
这里我们点击按钮调用add（执行加的方法）和del（执行减法的方法），然后在里面直接提交mutations中的方法修改值：
修改store.js文件，添加mutations，在mutations中定义两个函数，用来对count加1和减1，
这里定义的两个方法就是上面commit提交的两个方法如下：
我们可以将参数传递给mutations中的函数进行计算 这里是 num 。
上效果：
很好，count 数值都发生了改变，我点击了两下，并且 是可以在 Vue Devtools 中的 Vuex 看到过程效果
payload ：1 就是数值变化1 type 操作的方法是 addCount 也就是 mutations 根方法
ok！完美。
7、到了 Actions 了
Action 类似于 mutation，不同在于：
- Action 可以包含任意异步操作。
- Action 提交的是 mutation，而不是直接变更状态。
我们来看一下：
然后我们去修改Hello World.vue文件：
这里我们把commit提交mutations修改为使用dispatch来提交actions；我们点击页面，效果是一样的。
现在让我们来看看效果，这里我又点击了6下，很显然，效果是一样的。
8、来看一下 Vuex 里面的好东西，辅助函数 mapState、mapGetters、mapActions
如果我们不喜欢这种在页面上使用“this.$store.state.count”和“this.$store.dispatch(‘funName’)”这种很长的写法，
那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；
并且我们配合 … 拓展符 一起使用。
正常显示，效果是一样的，我们就可以不再使用很长的写法来调用了。
内容摘自：https://www.cnblogs.com/mica/p/10757965.html
目前就先这样！欢迎评论提问题
本文内容将会不断更新！