关于数据的作用域问题

相关代码：

const useRegister = (changeToast) => {
  const router = useRouter()
  const data = reactive({ username: '', password: '', checkPassword: '' })
  const handleRegister = async () => {
    try {
      const { username, password } = data
      if (username === '') {
        changeToast('请输入用户名') 
        return
      }
      if (password === '') {
        changeToast('请输入密码')
        return
      }
      const result = await post(
        '/api/user/register',
        {
          username,
          password 
        }
      )
      if (result.errno === 0) {
        changeToast('注册成功啦!')
        setTimeout(() => {
          router.push({ name: 'Login' })
        }, 1000)
      } else {
        changeToast('注册失败')
      }
    } catch (e) {
      changeToast('请求失败')
    }
  }
  const { username, password, checkPassword } = toRefs(data)
  return { username, password, checkPassword, handleRegister }
}

问题描述：data数据解构之后为什么不能在函数里面（在上面的if中）直接使用，但是在发生post请求中却可以使用

API调用工程师 2021-06-25

源自：项目：仿京东到家首页开发 3-9 Setup函数的职责以及注册功能的实现（2）

收起

1回答

好帮手慕久久回答被采纳获得+3积分 2021-06-25 18:06:17

同学你好，老师将同学的代码放到源码中测试，if中可以使用data中解构出来的数据：

注意，该代码处于注册页中，所以要将页面切换到注册页测试：

同学检查一下页面是否对应、代码是否保存、或者将项目终止，再重新启动试试。

如果还是不行，建议把该页面全部代码粘贴出来，老师再为你解答。

祝学习愉快！

收起回答

API调用工程师提问者 #1

const { username, password, checkPassword } = toRefs(data)
这里的解构为什么不使用torefs

2021-06-25 18:18:40
好帮手慕久久回复提问者 API调用工程师 #2

同学你好，是想问，为什么不使用toRef（代码中使用的是toRefs）吗？如果是的话，此处可以使用toRef，只是语法需要改动一下：
由于toRef的代码相对麻烦些，所以建议使用toRefs。
补充说明：
之所以要使用toRefs（toRef）来解构，而不是直接解构：

是因为直接解构出来的数据，不具备响应式；例如：当我们输入用户名时，代码中的username不会跟着变，即数据与页面不联动。
如果不是这个疑惑，可以再详细说一下，不要打错别字，老师再为你解答。
祝学习愉快！

2021-06-25 18:58:42
API调用工程师提问者回复好帮手慕久久 #3
```
const { username, password } = data
if (username === '') {
changeToast('请输入用户名')
return
}
```
老师我的意思是这里的解构为什么不用torefs
2021-06-25 22:04:21