Данные не заполняются в приложении Vue

Question

Я пытаюсь получить некоторые данные из моего хранилища vuex в компонент через computed. По какой-то причине это не позволяет мне получить доступ к userInfo.uid в нескольких моих компонентах. Говорят, что userInfo.uid - это undefined, хотя VueTools явно показывает, что он был успешно импортирован. Не знаю, почему это происходит. Например, здесь есть компонент викторины, где я пытаюсь получить данные userInfo из моего хранилища vuex, чтобы я мог использовать его для доступа к некоторым данным с помощью ссылки на firebase.

Должен ли я иметь доступ к моему состоянию vuex с помощью this.$store.state? Я тоже ошибаюсь, когда делаю это. В любом случае, следующий код дает мне неопределенное 95% времени. Кроме случайного, это даст userId, после чего я перезагрузите страницу, и она вернется к undefined. Не знаю, что происходит. Благодаря!

Quiz.vue

<template> 

</template> 

<script> 

// TODO: WHY IS userInfo.uid UNDEFINED!!!!????? 

var db = firebase.database(); 
import store from '../store' 
import { mapState } from 'vuex' 
import VueFire from 'vuefire' 
import Vue from 'vue' 

Vue.use(VueFire) 

export default { 
    name: 'quiz', 
    computed: mapState({ 
     userInfo: state => state.userInfo 
    }), 
    created() { 
     console.log(store.state.userInfo.uid) 
    }, 
    components: {}, 
    firebase: { 
     quiz: db.ref('/users/' + store.state.userInfo.uid + '/createdResources/' + store.state.postKey + '/quiz/') 
    } 
} 
</script> 

<style> 
    .quiz { 
     margin-top: 60px; 
     padding: 40px; 
     width: 800px; 
     background-color: white 
    } 
<style> 

Answer 1

Вы можете использовать жизненный цикл крюк: updated

Вызывается после изменения данных вызывает виртуальный DOM, чтобы быть повторно вынесен и заделан.

DOM компонента находится в обновленном состоянии при вызове этого крючка, поэтому вы можете выполнять операции, зависящие от DOM в этом хук. Однако в большинстве случаев вам следует избегать изменения состояния в этом случае, поскольку это может привести к бесконечному циклу обновления.

Этот крючок не вызывается во время рендеринга на стороне сервера.

Вы можете обратиться к следующей диаграмме жизненного цикла о том, какое событие вызывается, когда.

Answer 2

Использование computed вместо created в CreatedResources, так же, как в родительском компоненте. EDIT: Поскольку мы должны использовать $bindAsArray vuefire, что затрудняет объявление createdResources как computed, watchuserInfo и положить то, что находится внутри created.

объяснение:

created вызываются только один раз в целой жизни компоненты, в то время как computed повторно Evals каждый раз изменить его привлеченные свойства компоненты (и так vuex предполагает использование вычислена также вычислено должен также обнаруживает изменения состояния). Также попробуйте помещать log в computed в родительский компонент, он должен регистрировать значение при изменении состояния userInfo.

Как doc объясняет, computed часы свойства изменения, которые также могут быть achived с watch, с одной вещью выше: он кэширует вычисленные значения до тех пор, зависимости не изменится, в то время как watch Evals каждый раз, когда вы просите вычисленного значения.

опциональный улучшение:

db... Ввод в родительском и передать на стороне сервера неправдоподобно данные ребенка будет лучше, так как ребенок служит в качестве общего и Displayer должен получить готовый к дисплей-in просматривать данные.(он не знает, что означают данные, но заботится только о том, соответствуют ли данные его предопределенной структуре)