这里主要理解Vuex是实现数据共享的单例模式，当一个组件修改state时，其它组件显示的state也会变化，解决了Vue数据单向传输的问题，当一个组件修改state时，由于单向传输的特性，state并没有改变
一.使用流程
1 安装vuex
npm i vuex -S
2 文件目录
3 结构文件（index.js）
- 导入对应的包
- 声明在Vue中使用Vuex
-
对外暴露一个Vuex的Store对象
image.png
4 数据文件（state.js）
- 向外暴露全局共享数据
一般是从服务器获取的json对象
image.png
5 统一变量名（mutations-type.js）
由于会在actions中调用mutations中的方法，所以会将mutations中的方法名在mutations-type文件中统一管理
image.png
6 操作数据文件（mutations.js）
- 引入方法名称常量
-
导出需要暴露的方法
image.png
7 修改数据文件（action）
- 导入网络请求API
- 导入方法名常量
- 向外暴露请求数据的方法
- 请求数据
- 如果有效就调用commit函数利用mutations中定义的方法修改state这里mutations-type定义常量表示方法名的作用就显现出来了
image.png
8 将state中的数据渲染到view上（getters）
image.png
从组件修改state的流程，可以看出一个组件修改，所有都会变化
9 组件调用actions方法（navbar组件中的created方法）
image.png
10 在main.js中导入vuex并注册
image.png
