承诺解决后设置数据属性值

Question

在我的应用程序中，我需要使用 Sequelize 连接到 mysql 后端。以下是代码

export default {
        data () {
            return {
                username:''
            }
        },
        mounted () {
            this.dbConnect()
        },
        methods: {
            dbConnect : function () {
                console.log("Test connecting to the database");
                let connection = new Sequelize('mydatabase','root','12345' , {
                  host: '127.0.0.1',
                  dialect: 'mysql',
                  logging: console.log.bind(console)
                });

                var userGroup = connection.define('roles',{
                    name:Sequelize.STRING
                },{ freezeTableName: true, timestamps : false})

                userGroup.findById(1).then(function(group) {
                    this.username =  group.get('name');
                    console.info('current username is :' + this.username);
                })

            }
        }
    }

一切正常，只是到时候
this.username = group.get('name) 得到解决我的 UI 已经呈现。有没有一种方法可以更新我的数据属性以便它在我看来正确更新？

Answer 1

Vue Lifecycle Hooks Diagram

mounted 生命周期挂钩指的是何时创建了 Vue 实例并且相应的 el 组件已被 vm.$el 替换。

如果在实例的可视化呈现之前承诺的解析花费的时间太长，请尝试将其设置回 created 挂钩上的事件。这就是我通常为具有外部服务的 Vue 实例进行大量预处理和数据收集的地方，它总是运行良好。

所以不是...

mounted() {
    this.dbConnect()
}

...做...

created() {
    this.dbConnect()
}

更新

您可以使用 Vue 实例的条件渲染来在建立连接并完成承诺后触发完整渲染。

仅针对 HTML 中的外部元素，添加..

<div v-if="!isProcessing">
    <!-- contents -->
</div>

对您的 JS 稍作补充：

export default {
        data () {
            return {
                username:'',
                isProcessing: true
            }
        },
        mounted () {
            this.dbConnect()
        },
        methods: {
            dbConnect : function () {
                console.log("Test connecting to the database");
                let connection = new Sequelize('mydatabase','root','12345' , {
                  host: '127.0.0.1',
                  dialect: 'mysql',
                  logging: console.log.bind(console)
                });

                var userGroup = connection.define('roles',{
                    name:Sequelize.STRING
                },{ freezeTableName: true, timestamps : false})

                userGroup.findById(1).then((group) => {
                    this.username =  group.get('name');
                    this.isProcessing = false;
                    console.info('current username is :' + this.username);
                })

            }
        }
    }

Answer 2

几点

dbConnect : function () {
                console.log("Test connecting to the database");
                let connection = new Sequelize('mydatabase','root','12345' , {
                  host: '127.0.0.1',
                  dialect: 'mysql',
                  logging: console.log.bind(console)
                });

                var userGroup = connection.define('roles',{
                    name:Sequelize.STRING
                },{ freezeTableName: true, timestamps : false})

                userGroup.findById(1).then(function(group) {
                    this.username =  group.get('name'); // [1]
                    console.info('current username is :' + this.username);
                })

            }

在 [1]，您正在为 window 对象设置一个名为 username 的属性。

您需要将函数更改为：

userGroup.findById(1).then((group) => {
    this.username =  group.get('name');
    console.info('current username is :' + this.username);
})

或者您可以设置一个变量，例如

let self = this
userGroup.findById(1).then(function(group) {
    self.username =  group.get('name');
    console.info('current username is :' + self.username);
})

我想说的另一点是，请使用 vuex 操作进行异步调用。

承诺解决后设置数据属性值

Set the data property value when the promise has resolved

vue.js

vue-component

vuejs2

承诺解决后设置数据 属性 值

Set the data property value when the promise has resolved

vue.js

vue-component

vuejs2

承诺解决后设置数据属性值