老师我想请问下为什么有些自定义函数里面拿不到vue相关的东西

Question

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,
    }
}

Answer 1

双越 2021-03-29 18:32:12

我又查了查资料，忽然发现自己忽略了一个细节，就是：Vue3 要求，钩子函数（useStore useRoute等）必须在 setup 时触发。你的第一个函数没有用到 setup 中，所以报错了。

非常抱歉，这个疏忽导致问题拖了好几天～

• 提问者 晓白菜菜 #1

  非常感谢！

Answer 2

双越 2021-03-28 07:56:09

在拿不到的地方，如 useStore useRouter 等，你打印一下这个函数是啥？看看打印结果

另外，自定义函数最后要有 return

• 提问者 晓白菜菜 #1

  报错 Cannot read property 'commit' of undefined 还有route为undefined ，原因是这个函数我把他放到点击事件里面，也就是submit 里面就拿不到vue相关的数据，好奇怪啊，如果放在点击事件的外面就能拿到

• 双越 回复 提问者 晓白菜菜 #2

  不是，你要打印 useStore ，而不是打印 commit

• 提问者 晓白菜菜 回复 双越 #3

  打印出来是这种
  ƒ useStore (key) {
    if ( key === void 0 ) key = null;
  
    return Object(vue__WEBPACK_IMPORTED_MODULE_0__["inject"])(key !== null ? key : storeKey)
  } 
  
  ƒ useRoute() {
      return Object(vue__WEBPACK_IMPORTED_MODULE_0__["inject"])(routeLocationKey);
  }

点开查看后面4条评论