有一个关于VUE并发的问题,非专业前端比较疑惑

created() {
    let test = store.state.test // 44行

    //这里有没有可能出现:44行获取了旧数据,然后45行store的test设置成功,然后48没有接收到订阅消息?
    // 44行和49行是不是应该互换位置?

    const unsubscribe = store.subscribe((mutation, state) => { // 49行
        console.log('监听订阅', mutation, state)
        test = state.test
    })
    //this.setModel()
},
vue
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 2

不会啊,vue的状态机制就有考虑这种问题。话说前端的并发没法高到后端的并发的。 前端并发看的是单个用户的手速

6个月前 评论

ChatGpt 这样说:

在你提供的代码中,store.state.test 的值在 created() 生命周期钩子中被赋值给 test 变量。然后,你订阅了 Vuex store 的 mutation,以便当 test 状态改变时更新 test 变量的值。关于你的问题:

  1. 是否可能在第44行获取旧数据,然后在第45行 storetest 设置成功,然后第48行没有接收到订阅消息?

    这是可能的。在 JavaScript 中,代码是同步执行的,这意味着在订阅函数设置之前,如果 storetest 状态已经改变,那么订阅函数将不会接收到这个改变。因此,如果 storetest 状态在第44行和第49行之间的某个时刻改变,那么 test 变量将不会更新。

  2. 第44行和第49行是否应该互换位置?

    如果你想确保 test 变量始终反映 storetest 状态的最新值,那么应该首先设置订阅函数,然后再获取 store.state.test 的值。这样,即使 storetest 状态在订阅函数设置之后立即改变,订阅函数也会接收到这个改变,并更新 test 变量的值。所以,是的,你应该先设置订阅函数(即将第49行的代码放在第44行),然后再获取 store.state.test 的值。

这是修改后的代码:

created() {
    const unsubscribe = store.subscribe((mutation, state) => {
        console.log('监听订阅', mutation, state)
        test = state.test
    })

    let test = store.state.test

    //this.setModel()
},

请注意,这只确保了在订阅函数设置之后的 storetest 状态改变能被捕获。如果 storetest 状态在 created() 生命周期钩子执行之前就已经改变,那么 test 变量的初始值可能仍然是旧的。

6个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!