Vuex

1.Vuex的来历和作用

今天我们来聊一下Vuex,那么首先我们需要了解一下关于Vuex的由来, 在以前我们在进行web组件化开发的过程中，各组件之间会需要大量的传值,那么如果按照传统的办法时,就会导致我们的代码变得非常复杂而且因为数据量大导致我们在命名时可能会非常的混乱而且还有可能命名重复,因此为了解决这个问题,Vuex就诞生了. 那么根据这个我们可以得出Vuex 是 vue 项目中实现大范围数据共享的技术方案。他能够方便、高效地实现组件之间的数据共享

好处:

① 数据的存取一步到位，不需层层传递

② 数据的流动非常清晰

③ 存储在 Vuex 中的数据都是响应式的

2.Vuex的使用方法

第一步

我们需要在项目中安装和配置 Vuex 我们通过运行npm ，在把 Vuex 安装为项目的依赖包：

第二步

封装 Store 模块

① 导入 Vue 和 Vuex 依赖包

② 把 Vuex 安装为 Vue 的插件

③ 创建 store 的实例对象

④ 向外共享 store 的实例对象

把 Store 实例挂载到 Vue 实例上 ① 导入 store 模块

② 挂载 store 实例对象

第三步Vuex的工作流程

我们可以根据下面的这个图来了解到

1. 组件内可以通过dispatch触发Actions, Actions里面经常处理异步数据,
2. 数据返回后可以通过Commit 来触发Mutations, 每次触发都可以通过Devtools观测到它的类型和传参,
3. Mutations一般用来修改state里面的值, state里面的值变化了, 所有组件内的vuex的数据都变化了
4. 如果没有异步请求的话可以直接在组件里面通过 Commit 触发 Mutations 修改state里面的值

其中State、组件、Mutation 之间的关系就如下图一样 State：全局存储共享数据的地方

Vue 组件：使用数据的地方

Mutation：专门负责修改 State 中的数据