面试题：Vuex的actions与mutations有何区别及应用场景

Question

actions和mutations是Vuex中两个重要的概念。请说明它们在功能、触发方式、使用场景等方面的区别，并举例说明何时适合使用actions，何时适合使用mutations。

Answer 1

功能区别

• mutations：主要用于直接修改Vuex的状态（state）。它是唯一能直接修改state的地方，且必须是同步操作，这样便于Vuex利用devtools进行状态的追踪和调试。
• actions：不直接修改状态，而是提交mutations来间接修改状态。actions中可以包含异步操作，如API调用等。

触发方式区别

• mutations：通过commit方法触发。例如：this.$store.commit('mutationName', payload)。
• actions：通过dispatch方法触发。例如：this.$store.dispatch('actionName', payload)。

使用场景区别

• mutations：适用于简单的、同步的状态修改场景。比如，切换一个布尔值表示的加载状态：

// mutations.js
export const SET_LOADING = (state, isLoading) => {
  state.isLoading = isLoading;
}

// 组件中
this.$store.commit('SET_LOADING', true);

• actions：适用于需要进行异步操作（如网络请求）或者需要多个mutations协同完成复杂业务逻辑的场景。例如，登录功能，先调用API获取数据，再根据结果修改状态：

// actions.js
import axios from 'axios';
export const login = async ({ commit }, userInfo) => {
  try {
    const response = await axios.post('/api/login', userInfo);
    commit('SET_USER_INFO', response.data);
    commit('SET_LOGIN_STATUS', true);
  } catch (error) {
    console.error('登录失败', error);
  }
}

// 组件中
this.$store.dispatch('login', { username: 'admin', password: '123456' });