vue3 - 这里真的需要状态管理吗？

Question

这里真的需要状态管理吗？

慕课网上的基于Vue 3新标准，打造后台综合解决方案登录一节，将登录请求和响应处理用状态管理库vuex来处理。但是我觉得这里并不设计什么状态管理，直接将这部分操作封装到一个函数中即可，使用vuex我不太理解？

import { login } from '@/api/sys'import md5 from 'md5'export default {  namespaced: true,  state: () => ({}),  mutations: {},  actions: {    login(context, userInfo) {      const { username, password } = userInfo      return new Promise((resolve, reject) => {        login({          username,          password: md5(password)        })          .then(data => {            resolve()          })          .catch(err => {            reject(err)          })      })    }  }}

<template>    <el-button        type="primary"        style="width: 100%; margin-bottom: 30px"        :loading="loading"        @click="handleLogin"        >登录</el-button      ></template><script setup>import { ref } from 'vue'import { validatePassword } from './rules'import { useStore } from 'vuex'...// 登录动作处理const loading = ref(false)const loginFromRef = ref(null)const store = useStore()const handleLogin = () => {  loginFromRef.value.validate(valid => {    if (!valid) return    loading.value = true    store      .dispatch('user/login', loginForm.value)      .then(() => {        loading.value = false        // TODO: 登录后操作      })      .catch(err => {        console.log(err)        loading.value = false      })  })}</script>

Answer 1

首先用户的账户信息和登录状态，我们肯定是需要使用到状态管理的。
把登录逻辑放到 actions 里面也只是为了更加聚合，方便我们来阅读业务逻辑。

我们登录逻辑可能并不只是在 登录页 中会使用，可能会牵扯到一些 单点登录/第三方登录 的场景。
这个时候可能可以把 密码登录 功能提取到 登录页，独立出来一个 token 换取用户信息的接口，这个换取用户信息的接口就可以放到 store 里面替换掉现在的 login 方法了。

---

至于是否封装到一个函数中，就看个人喜好了，因为现在你的贴出来的业务逻辑其实很简单，所以可以放到一个统一/模块化的API请求管理文件中，但是如果业务逻辑比较复杂的时候就没办法很好的抽离了到单独的文件里。
比如说 �� ant-design-vue-pro/src/store/modules/user.js at master · vueComponent/ant-design-vue-pro 中获取用户信息的逻辑：

// 获取用户信息GetInfo ({ commit }) {  return new Promise((resolve, reject) => {    // 请求后端获取用户信息 /api/user/info    getInfo().then(response => {      const { result } = response      if (result.role && result.role.permissions.length > 0) {        const role = { ...result.role }        role.permissions = result.role.permissions.map(permission => {          const per = {            ...permission,            actionList: (permission.actionEntitySet || {}).map(item => item.action)           }          return per        })        role.permissionList = role.permissions.map(permission => { return permission.permissionId })        // 覆盖响应体的 role, 供下游使用        result.role = role        commit('SET_ROLES', role)        commit('SET_INFO', result)        commit('SET_NAME', { name: result.name, welcome: welcome() })        commit('SET_AVATAR', result.avatar)        // 下游        resolve(result)      } else {        reject(new Error('getInfo: roles must be a non-null array !'))      }    }).catch(error => {      reject(error)    })  })}

里面会有多个 Mutation 操作。如果抽离到一个纯JS文件中，就会造成很多不必要的心智负担。

Answer 2

回答

在给出的例子中，虽然使用了 Vuex 来处理登录请求和响应，但确实这个具体用例并不完全符合状态管理库通常解决的核心问题——即跨组件或页面的状态共享和同步。然而，是否使用 Vuex 在某些情况下是一个设计选择，取决于项目的复杂性和团队的需求。

对于简单的登录功能，如你所说，封装到一个函数中确实是一个更直接和简洁的方法。但是，Vuex 提供了额外的功能和好处，例如：

1. 集中化状态逻辑：将所有与登录相关的逻辑（如错误处理、token 存储等）集中在一个地方，使得代码更易于维护和理解。
2. 可预测性：由于 Vuex 的状态变更都是显式的（通过 mutations），这使得状态的变化更加可预测和易于调试。
3. 日志和插件支持：Vuex 提供了丰富的插件生态系统，例如你可以使用 Vuex 插件来记录状态的变化，这在开发和调试过程中非常有用。

然而，对于小型项目或简单的用例，Vuex 的这些好处可能并不明显，甚至可能引入不必要的复杂性。

结论：

• 对于简单的登录功能，封装到一个函数中通常是足够的。
• 但如果你正在开发一个大型项目，或者你的登录逻辑涉及到跨组件或页面的状态共享和同步，那么使用 Vuex 可能是一个更好的选择。

在你的具体例子中，如果登录只是与当前组件的状态相关（如显示加载状态），并且没有其他组件需要访问这个状态，那么使用 Vuex 可能不是必需的。但是，如果登录状态（如用户是否已登录、用户的身份等）需要在多个组件或页面之间共享，那么使用 Vuex 将是一个更好的选择。