这里真的需要状态管理吗？
慕课网上的[基于Vue
3新标准，打造后台综合解决方案](https://link.segmentfault.com/?enc=vl64taxZQbE1N7Z2Nz%2FuRA%3D%3D.0LY7TXOiQmMf33hd%2BwqLpxhEJ%2FC%2BdTjCINFMc%2Bca0A0e%2BT9xX7GGXn89gL4w4XLd)登录一节，将登录请求和响应处理用状态管理库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)
})
})
}
}
}
登录
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
})
})
}
首先用户的账户信息和登录状态，我们肯定是需要使用到状态管理的。
把登录逻辑放到 "actions" 里面也只是为了更加聚合，方便我们来阅读业务逻辑。
我们登录逻辑可能并不只是在 登录页 中会使用，可能会牵扯到一些 单点登录/第三方登录 的场景。
这个时候可能可以把 密码登录 功能提取到 登录页 ，独立出来一个 "token" 换取用户信息的接口，这个换取用户信息的接口就可以放到
"store" 里面替换掉现在的 "login" 方法了。
***
至于是否封装到一个函数中，就看个人喜好了，因为现在你的贴出来的业务逻辑其实很简单，所以可以放到一个统一/模块化的API请求管理文件中，但是如果业务逻辑比较复杂的时候就没办法很好的抽离了到单独的文件里。
比如说 👉 "ant-design-vue-pro/src/store/modules/user.js at master ·
vueComponent/ant-design-vue-pro" (https://link.segmentfault.com/?enc=%2BC5l3OrjduG1Dmwk0oVlpg%3D%3D.yPwOaHRLTM68PdOtj3%2FJNyxTKuSvJ0QQJPdXQrMv4xgvFTcNvCr3T3cszRyR2wTnzCqRxXV3OhKijSet9xVA6oXu3thUiEyJXYEcV9A%2BVMLiB21qx2zdRGINB5hvSGRH)
中获取用户信息的逻辑：
// 获取用户信息
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文件中，就会造成很多不必要的心智负担。
通了顺畅了
Frank的私人司机