35.VueJs学习-actions

在 Vuex 中，actions 用于处理异步操作以及提交 mutations 来间接更改状态。

一、基本概念

1.定义

• Actions 是一个对象，其中包含一些方法，这些方法接收一个包含 commit 方法的上下文对象（context）作为第一个参数，并且可以接收额外的参数。

     const store = new Vuex.Store({
       state: {
         count: 0
       },
       mutations: {
         increment(state) {
           state.count++;
         }
       },
       actions: {
         asyncIncrement(context) {
           setTimeout(() => {
             context.commit('increment');
           }, 1000);
         }
       }
     });

• 在这个例子中，定义了一个 action asyncIncrement，它在 1 秒后提交 increment mutation 来增加 count 的值。

2.触发

• Actions 可以通过 store.dispatch 方法来触发。

•    store.dispatch('asyncIncrement');

二、作用和优势

1.处理异步操作

• Actions 非常适合处理异步操作，如网络请求、定时器等。由于 mutations 必须是同步操作，所以不能在 mutations 中直接进行异步操作。通过 actions，可以在异步操作完成后提交 mutations 来更改状态。

2.组合与复用

• Actions 可以包含多个异步操作的组合，并且可以在不同的组件中复用。这使得复杂的业务逻辑可以在 actions 中进行封装和管理，提高了代码的可维护性和可复用性。

3.和中间件集成

1. Vuex 允许使用中间件来扩展 actions 的功能。中间件可以在 actions 执行前后进行一些额外的处理，如日志记录、错误处理等。

三、与mutations的关系

1.间接更改状态

• Actions 不能直接更改状态，而是通过提交 mutations 来间接更改状态。这是为了保持状态的更改是可追踪和可预测的。

2.严格的状态变更流程

• 通过 actions 和 mutations 的分离，可以确保状态的更改是经过严格的流程控制的。Actions 负责处理异步操作和业务逻辑，而 mutations 负责实际的状态更改。

总之，actions 在 Vuex 中起着重要的作用，它们提供了一种处理异步操作和封装业务逻辑的方式，同时保持了状态的更改是可追踪和可预测的。