@n_angelo
IT's OK

Как в data создать свойство на основе данных из firestore?

В data компонента есть свойство input_value, которое связано с инпутом. При загрузке страницы предполагалось, что в значение инпута подставлялось значение из store. Но input_value после загрузки страницы всегда = undefined. Пробовал принудительно присвоить в хуках created() и mounted(): this.input_value = this.user.custombutton
<template>
  <div>
    <span>{{user.custombutton}}</span> <!-- здесь  данные в store уже существуют-->
    <input v-model="input_value"> 
  </div>
</template>

export default {
  name: 'CustomButton',
  data: function () {
    return {
      input_value: this.user.custombutton // а здесь данных в store как будто еще не существует, input_value undefined
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    }
  }
}


index.js (в директории store/)
export default new Vuex.Store({
	state: {
		user: {}
	},
	mutations: {
		init(state, payload) {
			state.user = payload;
    }
	}
});


main.js (в src)
firebase.auth().onAuthStateChanged(function(user) {
	if (user) {
		var userID = user.uid
		db.collection("users").doc(userID)
		.onSnapshot(function(doc) {
			userdata = doc.data()
			store.commit('init', userdata)
		});
	}

	new Vue({
		el: '#app',
		router,
		store,
		components: { App },
		template: '<App/>',
		render: h => h(App),
		mounted () {
			// You'll need this for renderAfterDocumentEvent.
			document.dispatchEvent(new Event('render-event'))
		}
	})
});


Из шаблона данные в store видны и рендерятся во время. Такое ощущение что данные из базы прилетают как-то не вовремя. Зато после внесения изменений в файл и сохранении приложение на лету перекомпилируется и в браузер без перезагрузки страницы прилетают уже существующие данные и инпут заполняется данными из store. Я уже подумывал делать запросы в базу прямо из компонента, но таких инпутов-компонентов у меня около 10 штук, и 10 запросов при загрузке страницы — решение не очень хорошее, хотя и рабочее.

Что я делаю не так?

Кстати, я не один, кто с этим столкнулся.
  • Вопрос задан
  • 183 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Попробуйте отслеживать изменения user, т.е.:

export default {
  name: 'CustomButton',
  data: () => ({
    input_value: '',
  }),
  computed: {
    user() {
      return this.$store.state.user;
    },
  },
  watch: {
    user(val) {
      this.input_value = val.custombutton;
    },
  },
};
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы