强制计算变量更新（Firebase VueJS）

Question

我有一个导航链接，当我通过 firebase auth 将用户登录到应用程序时，我想更新它。

我通过created hook()中的.onAuthStateChanged管理用户登录变更

 data () {
    return {
      user: null,
      additionaluserinfo: null,
      isAdmin: false
    }
  },
 created () {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.user = user
        // call for additional user information from firebase
        db.collection('users').where('user_id', '==', user.uid)
          .get()
          .then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
              console.log(doc.data())
              this.additionaluserinfo = doc.data()
              this.$store.dispatch('setAdditionalUserInfo', doc.data())
            })
          })
          .catch((error) => {
            console.log('Error getting documents: ', error)
          })

        this.additionaluserinfo = this.$store.state.additionaluserinfo
        if (this.$store.state.additionaluserinfo.role === 'admin' || this.$store.state.additionaluserinfo.role === 'superadmin') {
          this.isAdmin = true
        }
        if (this.$store.state.additionaluserinfo.role === 'superadmin') {
          this.isSuperAdmin = true
        }
      } else {
        this.user = null
        this.additionalUserInfo = null
      }
    })

我正在检查用户是否对 onAuthSateChanged 具有用户权限。

我遇到的问题是我必须刷新页面才能更新我的导航栏（它显示一个基于 v-if="isAdmin" / "isSuperAdmin" 的 div。有没有办法强制这样做从 onAuthStateChanged 内部更新？

Answer 1

移动方块

this.additionaluserinfo = this.$store.state.additionaluserinfo
if (this.$store.state.additionaluserinfo.role === 'admin' || this.$store.state.additionaluserinfo.role === 'superadmin') {
  this.isAdmin = true
}
if (this.$store.state.additionaluserinfo.role === 'superadmin') {
  this.isSuperAdmin = true
}

在this.$store.dispatch('setAdditionalUserInfo', doc.data()).then(() => { /* */ }) 内，否则将在将数据分派到存储区之前评估该代码（数据获取是异步的）

或者，最好将其删除，然后添加：

computed: {
    role: () => this.$store.state.additionaluserinfo ? this.$store.state.additionaluserinfo.role : '',
    isAdmin: () => this.role === 'admin' || this.role === 'superadmin', // remove isAdmin from data()
    isSuperAdmin: () => this.role === 'superadmin',
}