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等，使得函数签名更加简洁。

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方法。

// 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调用等复杂异步逻辑。

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。

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应用的能力产生深远影响。