未在Vue應用程序中填充的數據

我試圖通過computed從我的vuex商店中獲取一些數據到組件中。出於某種原因，它不允許我在幾個組件中訪問userInfo.uid。這就是說，即使VueTools清楚地顯示它已被成功導入，userInfo.uid也是undefined。不知道爲什麼會這樣。例如，這裏是一個測驗組件，我嘗試從我的vuex商店獲取userInfo數據，因此我可以使用它在Firebase參考中訪問某些數據。未在Vue應用程序中填充的數據

我不能使用this.$store.state訪問我的vuex狀態嗎？當我這樣做的時候它也會拋出一個錯誤。無論如何，下面的代碼給我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>

來源

2016-11-17 maxwellgover

在你的圖片中有** apiKey **，可以向大家展示它嗎？ –

我自己並沒有使用Firebase。 'db'是從服務器還是從本地存儲中獲取數據？ –

從後端即服務提取數據。這個問題似乎是'createdInformation.vue'中未定義'userInfo'，但我不知道爲什麼它顯示'undefined'。我將'props：[userInfo]'傳遞給'createdResources.vue'，它應該允許我訪問它。 – maxwellgover

您可以使用生命週期掛鉤：updated

數據更改後調用導致虛擬DOM重新渲染和修補。

當調用此鉤子時，組件的DOM將處於更新狀態，因此您可以在此鉤子中執行與DOM相關的操作。然而，在大多數情況下，你應該避免在這個鉤子中改變狀態，因爲它可能導致無限的更新循環。

在服務器端呈現期間不調用此掛鉤。

你可以參考下面的生命週期圖什麼時候會調用什麼事件。

來源

2016-11-17 03:17:13 Saurabh

嘗試'更新'，但沒有奏效。 – maxwellgover

使用computed，而不是created在CreatedResources，就像在父組件。編輯：由於我們必須使用vuefire的$bindAsArray，這使得它很難宣佈createdResources爲computed，watchuserInfo並把created放在裏面。

解釋：

created在一個組件的生命週期只調用一次，而computed重新evals每它涉及的組件屬性更改的時間（因爲vuex建議使用計算過，算出還必須檢測狀態的變化）。也可以嘗試將log放在父組件中的computed，它應該記錄userInfo狀態更改時的值。

隨着doc解釋，computed手錶性能的變化，這也可以用watch achived，有一件事優越：直到依賴更改緩存計算出的值，而在你每次請求的計算值時watch evals。

可選的改進：

把db...父，並通過服務器端取的數據來孩子會比較好，因爲孩子作爲一個通用的顯示器，並應接受現成顯示IN-查看數據。（它不知道數據是什麼意思，但只關心數據是否與預定義結構匹配）

來源

2016-11-18 04:41:37

你建議我在'CreatedResources'中放入'calculate'是什麼？我認爲計算只是功能非常多？如果我通過道具獲取數據，爲什麼還需要計算屬性？ – maxwellgover

@staxwell編輯。你有傳入的道具，但仍需要'db'以'userInfo.uid'獲取更多東西，我理解正確嗎？ –

我需要'db'從firebase中獲取某些路徑是db.ref（'/ users /'+ userInfo.uid +'/ createdResources /'）的東西' – maxwellgover

未在Vue應用程序中填充的數據

回答

相關問題