【11.0】Vue之状态管理器(Vuex)的使用

vuex

【一】介绍

• vuex :状态管理器---》存数据(变量)的地方，所有组件都可以操作

• 在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信

• Vuex是一个用于集中式状态管理的Vue插件。
  • 在Vue应用中，组件间共享的数据通常需要通过props逐级传递，但对于较深层级的组件或跨组件的通信，这种方式可能会导致代码冗余和不易维护。
  • 而使用Vuex，我们可以将共享的状态集中存储在一个地方，并允许任何组件以可预测的方式进行读取和修改。

【二】何时使用

【1】Vuex图解

• vuex 对象中通过 state 来存储状态

  • 除了 state 以外还有用来操作 state 中数据的方法集
  • 以及当我们需要对 state 中的数据需要加工的方法集等等成员。

• 成员列表：

  • state：存放状态(全局状态数据) 必填项

  • mutations：对于 state 成员进行同步修改操作(也可以支持异步操作)

  • getters：获取 state 中的数据，类似于组件中的计算属性

  • actions：进行异步操作，异步得到结果后通知 mutation 修改 state 成员

  • modules：模块化状态管理，多状态文件管理时使用，开发项目时多为多模块项目

• 在多模块 vuex 中会有配置namespaced:true开启命名空间。

【2】Vuex执行流程

• vue 组件会从 vuex 的 state 中获取数据，当组件修改数据时，会经过以下流程：

  • 当触发同步操作时：
    • vue 组件通过 commit 方法通知 mutations (同时 mutations 会在 Devtools 调试工具中记录发生的操作)设置 state 数据，数据设置完成后，state 响应式的让组件重新渲染。

  注意：vuex 存储的数据是响应式的，只要 state 中的数据发成改变，视图就会重新渲染。

• 当触发异步操作时：

  • vue 组件通过 dispatch 方法通知 actions 和 API交互，从而得到数据，actions 得到数据之后通过 commit 方法通知 mutations (同时 mutations 会在 Devtools 调试工具中记录发生的操作)设置 state 数据，数据设置完成后，state 响应式的让组件重新渲染。

  • 这里可以看出，在 vuex 中，我们可以把网络请求写在 API 方法中。

• 扩展：
  • 早期 mutations 只允许同步操作，如果要进行异步操作需要按照上述流程