import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

// 自定义函数
const getUserInfo = () => {
    const { commit } = useStore()  // 报错，没有useStore这个玩意
    const route = useRoute()       // 报错，没有路由这玩意
    const router = useRouter()     // 报错，没有路由这玩意
    // 没有办法拿不到只能从外部传递进来了  commit，route，router.....
    // ...省略一堆代码，比如存储数据，请求其他接口，跳转页面

}

// 普通点击按钮登录逻辑
export const useSubmitLogin = () => {
	// 这里面不报错，能拿到vue相关的东西
    const { commit } = useStore() 
    const route = useRoute()
    const router = useRouter()
    const submit = async () => {
        // 这里面处理登录
        try {
            const data = await login()
            message.success('登录成功')
            // 登录成功后调用获取用户信息接口，这个接口里面有存储用户数据和跳转路由相关逻辑
            /* 
                问题来了这个getUserInfo函数里面拿不到和vue相关的东西，比如store和路由，
                我只有从这个传递参数才能拿到，如果这个参数很多，一个个传递很麻烦
                其实我是想知道为什么这个useSubmitLogin能拿到vue相关的东西
                而这个getUserInfo就拿不到呢
            */
            getUserInfo(commit, route, router)
        } catch (e) {}
    }
    return {
        submit,
    }
}

/* 
这里是vue的页面
*/

import useSubmitLogin from './test'
setup() {
    const { submit } = useSubmitLogin()
    return{
        submit,
    }
}