В 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 запросов при загрузке страницы — решение не очень хорошее, хотя и рабочее.
Что я делаю не так?
Кстати,
я не один, кто с этим столкнулся.
