面试题：Vue中如何在Vuex的actions里发起网络请求并管理异步数据流

Question

请描述在Vue项目中，如何利用Vuex的actions来发起网络请求，并且将请求结果合理地存储到Vuex的state中，同时阐述mutation在这个过程中的作用。

Answer 1

1. 在Vuex的actions中发起网络请求并存储结果到state：
   • 首先在actions中引入网络请求库，例如axios。假设我们有一个获取用户信息的请求。
   • 在actions对象中定义一个方法，比如fetchUserInfo：

import axios from 'axios';

const actions = {
    async fetchUserInfo({ commit }) {
        try {
            const response = await axios.get('/api/userInfo');
            commit('SET_USER_INFO', response.data);
        } catch (error) {
            console.error('Error fetching user info:', error);
        }
    }
};

• 这里使用async/await语法来处理异步操作。await等待axios的get请求完成，然后通过commit调用mutation（SET_USER_INFO）将请求到的数据（response.data）提交。

2. mutation的作用：
   • mutation是Vuex中唯一可以直接修改state的地方。它的设计原则是保证状态变化的可追踪性和原子性。
   • 在mutations对象中定义SET_USER_INFO方法，如下：

const mutations = {
    SET_USER_INFO(state, userInfo) {
        state.userInfo = userInfo;
    }
};

• 这个mutation接收state和从action中commit过来的userInfo数据，然后直接修改state中的userInfo属性，将网络请求获取的数据合理地存储到state中。这样，整个应用的其他组件就可以通过mapState等方式获取并使用这个数据。