面试题：Vuex中如何在actions里实现异步数据加载并缓存到state

安装依赖：确保项目中安装了 axios 和 vuex。如果没有，通过以下命令安装：

npm install axios vuex --save

配置Axios：在项目中可以创建一个 api.js 文件来配置 axios，例如：

import axios from 'axios';

const api = axios.create({
  baseURL: '你的API基础URL'
});

export default api;

在Vuex中定义actions、mutations和state：在 store/index.js 中：

import Vue from 'vue';
import Vuex from 'vuex';
import api from '@/api';

Vue.use(Vuex);

const state = {
  userList: []
};

const mutations = {
  SET_USER_LIST(state, data) {
    state.userList = data;
  }
};

const actions = {
  async fetchUserList({ commit }) {
    try {
      const response = await api.get('/users'); // 假设API路径为/users
      commit('SET_USER_LIST', response.data);
    } catch (error) {
      console.error('Error fetching user list:', error);
    }
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions
});

在组件中调用action：在Vue组件中：

<template>
  <div>
    <button @click="fetchUsers">获取用户列表</button>
    <ul>
      <li v-for="user in $store.state.userList" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    fetchUsers() {
      this.$store.dispatch('fetchUserList');
    }
  }
};
</script>

以上代码示例展示了在Vuex的 actions 中使用 axios 进行异步数据请求，并将数据缓存到 state 的过程。其中，actions 负责发起异步请求，mutations 负责修改 state。在组件中通过 dispatch 调用 actions 来触发数据请求。

星途面试题库

面试题：Vuex中如何在actions里实现异步数据加载并缓存到state

知识考点

面试题答案