Vue：从导入更新数据（）中的值

Question

我有一个名为 Authenticator.coffee

的文件

...
# User
user =
    id: '123'
export { user }


# Auth change
auth = firebase.auth()
auth.onAuthStateChanged (u) => 
    console.log('Auth state changed ', u.uid)
    user.id = u.uid

... 在 Page.vue 中，我想显示 id:

...
{{ uid }}
...


<script>
    import { user } from '../providers/Authenticator.coffee';
    export default {
        data() {
            return {            
                uid: user.id
            }
        }
    }
</script>

显示初始值，但未更改。确实发生了变化，我可以看到 'Auth state changed' 消息与 id.

一起记录

导入值的变化不会反映在 data() 中吗？
否则我该怎么做？

额外：我可以不在 template 中做 {{ user.id }} 并且让 script 只包含 import 吗？

Answer 1

因为 uid 很可能是一个字符串，它被复制而不是通过引用共享。对于更新组件中值的身份验证，传递用户对象本身，以便在两个文件之间共享相同的对象。

Vue：从导入更新数据（）中的值

Vue: update a value in data() from import

vue.js

vuejs2

vue-reactivity