面试题：Vue3中如何在Vuex里定义网络请求状态相关的状态及mutations

Question

在Vue3的Vuex应用中，假设你正在开发一个用户登录功能，需要在Vuex里管理登录请求的状态（如loading、成功、失败），请描述如何定义相关的状态以及对应的mutations方法，并给出简单代码示例。

Answer 1

1. 定义状态（state）： 在Vuex的state对象中定义登录请求的相关状态。

// store.js
const state = {
  loginLoading: false,
  loginSuccess: false,
  loginError: null
}

2. 定义mutations方法：

• SET_LOGIN_LOADING：设置登录加载状态。
• SET_LOGIN_SUCCESS：设置登录成功状态。
• SET_LOGIN_ERROR：设置登录失败状态。

const mutations = {
  SET_LOGIN_LOADING(state, payload) {
    state.loginLoading = payload;
  },
  SET_LOGIN_SUCCESS(state, payload) {
    state.loginSuccess = payload;
    state.loginError = null;
  },
  SET_LOGIN_ERROR(state, payload) {
    state.loginError = payload;
    state.loginSuccess = false;
  }
}

3. 完整示例：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    loginLoading: false,
    loginSuccess: false,
    loginError: null
  },
  mutations: {
    SET_LOGIN_LOADING(state, payload) {
      state.loginLoading = payload;
    },
    SET_LOGIN_SUCCESS(state, payload) {
      state.loginSuccess = payload;
      state.loginError = null;
    },
    SET_LOGIN_ERROR(state, payload) {
      state.loginError = payload;
      state.loginSuccess = false;
    }
  }
});

export default store;

在组件中使用：

<template>
  <div>
    <button @click="login">登录</button>
    <div v-if="loginLoading">加载中...</div>
    <div v-if="loginSuccess">登录成功</div>
    <div v-if="loginError">{{ loginError }}</div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();

const login = () => {
  store.commit('SET_LOGIN_LOADING', true);
  // 模拟登录请求
  setTimeout(() => {
    const success = Math.random() > 0.5;
    if (success) {
      store.commit('SET_LOGIN_SUCCESS', true);
    } else {
      store.commit('SET_LOGIN_ERROR', '登录失败');
    }
    store.commit('SET_LOGIN_LOADING', false);
  }, 1000);
}
</script>