6-Vuex流程

这里主要理解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