Vuex是vue全家桶中最适合大型应用的代码库，可以保存网页应用的历史状态，提供网页回溯功能，管理各个组件的状态和关系。
但对于小型应用来说过于繁重，一个bus-中央总线就可以满足您的需求。
前言
vuex是vue全家桶中最难的一个，而且会感觉比较绕，在学习之前，建议您先学习：
vue
vue-router
node
简介
在做例子之前，我们需要来了解一下Vuex的思想，避免盲人摸象，如果觉得枯燥的话也可以先看后面的案例，可能会更容易理解。
单向数据流
Vuex内容比较复杂，大家不妨类比组件来看一看，左边是官网单向数据流表，右边是vue组件系统：
Action : 类似于methods方法，用来改变State中的数据（等会会提到mutations）
State ： 类似于组件中data，用来保存数据（可以提供快照，回溯功能）
View ： 这个是Vuex外的内容，通过action来实现功能，也从state中获取数据这就是所谓的单向数据流
Vuex的运行机制
Vuex运行机制如下图，在下剪去了一些复杂的内容
简单解释一下图中几个英文单词的意思：
四个元件：
Vue Components ：组件，大家应该已经写过很多了
Actions ：方法（异步），负责调用mutation里面的方法
Mutations ： 方法（里面只能放同步），里面定义了各种方法，用来修改State的内容
State ： 说白了就是一个对象，里面用对象储存内容，和data相似
四个动作：
Dispatch：派遣，类似于子组件的$emit
Commit ： 触发，使用Vuex实例的commit方法，触发Mutation里面的方法
Mutate ： 变更，使用Mutations里面的方法来改变State内容
Render ： 实际上属于components组件调用State里面的内容来进行页面渲染
想必大家看完这些已经有点晕了吧，晕就对了，接下来我们来做点简单的实例。
示例
思维导图
做之前，我们先看下示例是如何运行的吧：
vm组件绑定了一个计算属性，从state里面拿值
vm组件侦测到点击事件，告诉store实例：让Action帮我改数据
Action收到领导的命令，告诉下属程序员mutations：给我改数据
Mutations就很听话的改变了State的数据
State作为总受当然很服帖的改变了数据
当然，State里面的数据逃不过vm的眼睛，vm计算属性检测到了数据变化，从而改变了值
示例的初始化
我们新建一个文件夹，新建一个html文件，引入基本的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body>
<div id="app">
</div>
<script>
const store = new Vuex.Store({
state : {
},
actions : {
},
mutations : {
}
})
let vm = new Vue({
el : "#app",
data : {
},
computed : {
},
methods : {
}
})
</script>
</body>
</html>以上初始化了我们的项目，其中初始化了
store实例，包括三巨头：state,actions,mutations
vm实例，vue的一个组件而已
好，接下来我们来做一个点击增加数字的网页
html数据渲染
修改如图红框中间的数据，这里我们绑定了
count : 计算属性
counter : 函数，绑定在methods中
好的，接下来修改vm中内容：
解释下参数：
count : 计算属性，返回store里面的值
counter : 函数，使用store的dispatch方法，触发incrementAction 的Action方法
store中数据绑定
解释下几个参数：
count : 数字的计数，和data中数据很像
incrementAction ： 触发mutations中的increment方法
increment ： 增加数字的值，和methods中函数很像
好的，接下来刷新网页，点击按钮，是不是数字增加了呢了呢？这就是最简单的一个实例。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。