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

首先用户的账户信息和登录状态，我们肯定是需要使用到状态管理的。把登录逻辑放到 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文件中，就会造成很多不必要的心智负担。