uniapp的data里的对象数据，指向获取不到

Question

<script>
    import {request} from '@/utils/request.js'
    export default {
        data() {
            return {
                form:{
                    username:'name',
                    userpwd:'123'
                }
                // height:uni.getSystemInfoSync().windowHeight-uni.upx2px(80),
            }
        },

data里的这个form对象数据，指向获取不到
methods: {
            login:async function(){
                // const that = this 这样也没用
                //先赋值给变量，这两行代码也不执行
                const form = that.form
                console.log('1',form);
                //直接指向this.form不执行这段代码
                console.log('2',that.form);
                //指向this.form.username执行了，上面的三行代码没有报错也不执行
                console.log('3',this.form.username);
                // const data = await request({url:'/login/post',method:'post',data:this.form})
                // console.log('data',data);
            },
        },

Answer 1

基于Monster 组和GPT的调写：

方法一：在 uni-app 中使用 Vue.js 编写的方法存在一定的上下文规则。在 JavaScript 的异步函数（async function）中，this 关键字的行为可能与你预期的不同，因为它可能不会指向 Vue 实例。在你的代码中，问题可能出在 this 的使用上。

1. 首先，你在注释中提到 const that = this 这样也没用。这是因为你可能没有在异步函数外部声明 that，所以 that 并不指向 Vue 实例。你应该在方法的外部声明 that，如下所示：

methods: {
    login: async function() {
        const that = this; // 确保在异步函数内部使用的 'this' 是 Vue 实例
        const form = that.form;
        console.log('1', form);
        // ... 其余代码
    },
},

1. 如果 console.log 不打印任何内容，并且没有报错，可能是因为方法没有被正确调用。确保你在模板中使用了例如 @click="login" 这样的代码来触发该方法。

2. 确保 form 对象在你尝试访问它的时候已经初始化完成。如果 form 对象是从服务器获取或者依赖于某些异步操作，那么在这些操作完成之前，form 可能是 undefined。

3. 如果问题仍然存在，可能需要检查其他代码或者项目配置是否有影响。例如，检查 request.js 是否正确导出和处理请求，或者检查项目的其他部分是否有可能影响 this 的作用域。

4. 另外，你可以尝试使用箭头函数，箭头函数不会创建自己的 this 上下文，因此它内部的 this 会是包围它的代码块的 this：

methods: {
    login: async () => {
        console.log('1', this.form);
        // ... 其余代码
    },
},

请注意，如果你使用箭头函数，那么在函数内部使用 this 应该可以直接访问到 Vue 实例的数据和方法。但也要注意，Vue 官方文档建议避免在 Vue 实例的方法内使用箭头函数，因为这样做会使你失去对实例的访问权限，这在某些情况下可能会非常重要。

方法二：在 uni-app 或 Vue.js 中，this 关键字用于在 Vue 组件的方法中引用组件实例的数据和方法。如果您在组件的方法中想引用 data 中的变量或对象，您应该使用 this 关键字。

在您给出的代码片段中，有一些问题需要修复：

1. 您在 methods 中使用了一个变量 that，但您没有定义它。您可以删除该变量，因为您可以直接使用 this 关键字来引用组件的 data 和 methods。
2. 您的代码中有一些注释和未使用的代码。为了简化代码并避免混淆，我会将它们移除。

下面是修复后的代码：

<script>
    import {request} from '@/utils/request.js'

    export default {
        data() {
            return {
                form: {
                    username: 'name',
                    userpwd: '123'
                }
            }
        },
        methods: {
            login: async function() {
                // 直接使用 this.form 来引用 data 中的 form 对象
                console.log('1', this.form);
                console.log('2', this.form);
                console.log('3', this.form.username);
                // const data = await request({url:'/login/post', method:'post', data:this.form});
                // console.log('data', data);
            },
        },
    }
</script>

上述代码修复后应该可以正常工作。您可以使用 this.form 来引用 data 中定义的 form 对象，并使用 this.form.username 来引用 form 对象的 username 属性。