Vuex学习记录

什么是VUEX？

vuex中一共有五个状态 State Getter Mutation Action Module

• State：存储全局状态。

• Getter：计算派生状态，相当于组件里的 computed。

• Mutation：同步修改 state。

• Action：处理异步操作，提交 mutation。

• Module：模块化管理 state、getter、mutation 和 action。

实例介绍

下列一些例子作为详细介绍：

• State 这里是字段所需的对应的数据 state提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存， 以 declare.js 为例，state 保存了整个申报书相关的数据：

这些 state 对象在页面中通过 mapState 或 this.$store.state.declare 获取，实现数据共享。 例如，在企业申报书基本信息页面： 组件中不需要再通过 props 传递这些数据，可以直接从 Vuex 拿。

• Getter

Getter 可以从 state 派生出新的数据。例如：

这样组件就可以通过更加简便的方式来访问数据例如：this.store.getters.sidebar，而不是this.store.state.app.sidebar

• Mutation

Mutation 用于同步修改 state。这个 mutation 接收两个参数：

state：当前模块的 state

data：需要存入 state 的新数据。

在项目中，mutation 有时会处理一些数据格式化逻辑，例如在下面例子需要处理的逻辑是：

• 把企业 2022、2023、2024 三年的经营数据按年份排序；

• 然后提取出前 3 条，分别放到 firstYear、secondYear、thirdYear 里； mutation 必须是同步操作，不能包含异步逻辑。

• Action

Action 的主要作用是处理异步操作或者封装复杂逻辑 ，再提交 mutation。

在项目中，action 主要用于封装 mutation：

这里就是把在mutation中处理过的数据通过data重新commit给字段所需的数据源。

• Module

模块化管理会将整个 Vuex 被拆分成多个模块，每个模块有自己的 state、mutation、action 和 getter：

但在本次项目的例子中并未进行模块化管理，而是统一管理的方式。

项目实践总结

1. 所有数据都存放在 declare 模块里，组件可以直接拿数据。
2. 页面组件不再需要父子传递 props，组件间共享 state 更加地方便快捷。
3. mutation 中可以统一处理数据格式比如年份排序、字符串分割等，保持组件简洁。
4. Action 可以处理 API 请求，组件只需触发 dispatch，不关心具体数据处理逻辑。