Как использовать глобальную переменную в vue, она не обновляет вычисляемые переменные? - PullRequest
Новая
       18

Как использовать глобальную переменную в vue, она не обновляет вычисляемые переменные?

0 голосов
/ 04 февраля 2020

Я создаю веб-приложение и сейчас внедряю аутентификацию с использованием firebase. У меня работает интерфейс входа в систему, и теперь я хочу поделиться этими данными с остальной частью приложения.

Поскольку я не использую Vuex, я попытался использовать Vue .prototype. $ UserData = {}, чтобы сделать глобальная переменная, поэтому мне не нужно беспокоиться о ее передаче.

Я создаю переменную в приложении. js примерно так: 

  mounted() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        //RETRIEVING SOME EXTRA USER DATA HERE
        firebase
          .firestore()
          .collection('users')
          .doc(user.uid)
          .get()
          .then(function(doc) {
            if (doc.exists) {
              console.log(doc.data()) //THIS LOG WORKS
              Vue.prototype.$userData = {...user, ...doc.data()};
            } else {
              // doc.data() will be undefined in this case
              console.log('No such document!');
            }
          })
          .catch(function(error) {
            console.log('Error getting document:', error);
          });
      }
    });
  }

Затем я попытался использовать ее в такой компонент: 

  computed: {
    username: function () {
      if(this.$userData) {
        return this.$userData.naam;
      } else return "-";
    }
  }

Но он не обновляется после завершения $ userData. Что здесь происходит не так. Обновляется ли вычисляемое значение для глобальной переменной?

PS Когда я внесу изменения в код, чтобы сборка перекомпилировалась в прогоне npm, то появится имя пользователя. Когда я затем перефразирую sh страницу, она больше не работает.

1 Ответ

0 голосов
/ 05 февраля 2020

Используйте watch вместо вычисляемого свойства. 

watch:{
  '$userData' = function(newValue){
     ...
     this.name = newValue.name;
     ...
  }
}

Более подробную информацию можно получить по адресу: https://flaviocopes.com/vue-watchers/

PS: при условии, что вы можете получить доступ $userData в приложении Vue.

...