18.4.5 定义action-Vue.js从入门到精通(四)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(四)

### 18.4.5 定义Action

在Vue.js项目中，尤其是使用Vuex作为状态管理库时，`action`是处理异步操作和副作用（side effects）的关键部分。`action`与`mutation`不同，`mutation`必须同步执行，直接改变状态（state），而`action`则通过提交`mutation`来间接改变状态，同时允许执行任何异步操作，如API调用或复杂的逻辑判断。在`Vue.js从入门到精通(四)`的这本书中，深入理解并正确定义`action`对于构建高效、可维护的应用至关重要。

#### 18.4.5.1 理解Action的作用

在Vuex中，`action`通常用于处理业务逻辑，特别是那些涉及到异步操作的逻辑。它们可以被视为是`mutation`的“包装器”，通过提交`mutation`来更新状态，但不受`mutation`必须同步执行的限制。这样的设计允许开发者在`action`中执行任何类型的操作，包括但不限于数据验证、异步请求（如使用`axios`或`fetch`进行网络请求）、数据转换等，然后再通过`commit`方法提交`mutation`来更新状态。

#### 18.4.5.2 定义Action的基本语法

在Vuex的store中定义`action`，需要将其作为对象的一个属性，每个属性名对应一个`action`的名称，属性值是一个函数，该函数接收一个上下文对象（`context`）作为参数。这个上下文对象允许我们调用`commit`来提交`mutation`，以及通过`context.state`和`context.getters`来访问状态和getter。但为了方便，Vuex允许我们解构出`commit`和`state`等，使得函数签名更加简洁。

```javascript
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementIfOddOnRootSum({ state, commit }, payload) {
      if ((state.count + payload.amount) % 2 === 1) {
        commit('increment');
      }
    },
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});
```

在上述例子中，`incrementIfOddOnRootSum`是一个带有条件判断的`action`，它接收一个`payload`参数，并根据当前状态与传入值之和的奇偶性来决定是否提交`increment`这个`mutation`。而`incrementAsync`则演示了如何在`action`中执行异步操作，这里使用了`setTimeout`来模拟异步延迟，然后在延迟后提交`increment`。

#### 18.4.5.3 使用`dispatch`触发Action

在组件中，你可以通过`this.$store.dispatch('actionName', payload)`的方式来触发`action`。如果你在使用Vue组件的`<script setup>`语法或Composition API，则可以通过`useStore`函数获取store实例，然后调用其`dispatch`方法。

```javascript
// Options API
export default {
  methods: {
    incrementOdd() {
      this.$store.dispatch('incrementIfOddOnRootSum', { amount: 1 });
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
}

// Composition API
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

function incrementOdd() {
      store.dispatch('incrementIfOddOnRootSum', { amount: 1 });
    }

function incrementAsync() {
      store.dispatch('incrementAsync');
    }

return { incrementOdd, incrementAsync };
  }
}
```

#### 18.4.5.4 处理Action中的异步操作

在`action`中处理异步操作时，除了使用简单的`setTimeout`外，更常见的是使用`Promise`、`async/await`等现代JavaScript特性来处理API调用等复杂异步逻辑。

```javascript
actions: {
  fetchUserData({ commit }, userId) {
    return axios.get(`/api/users/${userId}`).then(response => {
      // 处理响应数据
      const userData = response.data;
      // 提交mutation来更新状态
      commit('setUser', userData);
    }).catch(error => {
      // 处理错误，如通过commit提交一个错误处理的mutation
      commit('setError', error.message);
    });
  },
  async fetchUserDataAsync({ commit }, userId) {
    try {
      const response = await axios.get(`/api/users/${userId}`);
      const userData = response.data;
      commit('setUser', userData);
    } catch (error) {
      commit('setError', error.message);
    }
  }
}
```

在上面的例子中，`fetchUserData`使用`Promise`来处理异步请求，而`fetchUserDataAsync`则使用`async/await`语法，使得代码更加简洁易读。

#### 18.4.5.5 模块化的Action

在大型应用中，你可能会将Vuex store分割成多个模块（module），每个模块管理应用的一个特定部分的状态。在这些模块中，你也可以定义`action`，它们的作用域被限制在各自的模块内。但是，Vuex也允许你在模块间共享`action`，或者使用根store的`action`。

```javascript
const moduleA = {
  actions: {
    someAction({ commit, rootState }) {
      // 可以访问当前模块的commit和整个state树
      console.log(rootState.someOtherFeature.someProperty);
      commit('someMutation');
    }
  }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    // 其他模块...
  }
});
```

在模块化的`action`中，你可以通过`context.rootState`访问根state，通过`context.rootGetters`访问根getters，通过`context.dispatch`和`context.commit`的第一个参数加上模块名来调用其他模块的`action`或`mutation`。

#### 18.4.5.6 总结

在Vue.js项目中，`action`是处理异步操作和副作用的强大工具。通过正确定义和使用`action`，你可以构建出既高效又易于维护的状态管理逻辑。在定义`action`时，要注意其异步特性和作用域，合理利用`Promise`、`async/await`等现代JavaScript特性来优化异步操作的处理。同时，也要考虑将Vuex store模块化，以便更好地组织和管理应用的状态。在`Vue.js从入门到精通(四)`的这本书中，深入理解和掌握`action`的使用，将对你开发Vue.js应用的能力产生深远影响。

该分类下的相关小册推荐：

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(五)

TypeScript和Vue从入门到精通(三)

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(三)

Vue原理与源码解析

VUE组件基础与实战

Vue.js从入门到精通(二)

Vue源码完全解析

移动端开发指南

TypeScript和Vue从入门到精通(四)