这样的vue组件如何更加优雅?

Question

经常有些组件功能比较复杂（js比较多），但是他的ui比较简单（html，css少）。这时候组件代码是比较臃肿庞大的，比较难维护，定位一个函数可能都得找一会。但是又不好继续拆分成子组件了，因为ui不好再拆分了。这时候怎么去拆分，让这些js模块化一些?

现在想到的是用mixin，有其他更方案吗？

Answer 1

那我来说说我在开发中通常的做法，就拿一个登录的场景来说吧。

首先我会创建一个api文件夹，用来管理所有的请求接口。比如登录的接口是http://xxx.xxx.com/api/login，需要传递用户名(手机号)、密码。

我会在api下面新建一个login.js(这个文件负责处理登录的逻辑)

import axios from "axios"

export function login(url,uPhone,uPassword,cb){
    //在这里可以对用户名、密码进行判断操作
    axios.post("url",{
        phone:uPhone,
        password:uPassword
    }).then((res)=>{
        cb(res);
    },(err)=>{
        cb(err);
    })
}

然后在login.vue组件里面导入
import {login} from "../api/login";

然后在点击登录按钮的事件中：

methods:{
    dealLogin(){
        login("/api/login",this.phone,this.password,initLogin);
    },
    //这里就根据返回的code进行判断
    initLogin(loginReqData){
        if(loginReqData.code === 200){ //登录成功
            
        }else{//登录失败
            
        }
    }
}

这样一样，就将所有的逻辑交给对应的js文件去处理，vue组件只负责调用这样的模块。

Answer 2

可以参考我写的文章https://segmentfault.com/a/11...，希望对你有帮助

Answer 3

通用方法写成组件，然后各种import，require 引入减少重复劳动。
比如统一处理请求。
webService.js
比如自定义的处理字符串的方法
string.js
用于表单校验的方法集合
validate.js

Answer 4

引入服务层 https://kenberkeley.github.io...

Answer 5

公共方法可以抽出来放在js文件里面