Firebase 个人资料图片在页面重新加载时消失答案

【问题标题】：Firebase profile picture dissappears on page reloadFirebase 个人资料图片在页面重新加载时消失
【发布时间】：2019-02-16 03:07:46
【问题描述】：

寻求帮助

我正在将 vue 与 vuex 和 firebase 一起用于我正在构建的应用程序。我已经能够让用户将个人资料图片从他们的计算机上传到 Firebase 存储，并且图像也显示在他们的仪表板上。问题是这样的，当我刷新页面时，图像消失了。我无法为该用户永久存储图像，因为每次刷新时，图像都会消失。这是我的 store.js 代码：

fb.auth.onAuthStateChanged(user => {
if(user) {
    store.commit('setCurrentUser', user)
    store.dispatch('fetchUserProfile')
}
})


export const store = new Vuex.Store({

state: {
    currentUser: null,
    userProfile: {},
    userProfilePic: null
},
actions: {
    clearData({commit}) {
        commit('setCurrentUser', null)
        commit('setUserProfile', {})
    },
    fetchUserProfile ({ commit, state }) {
        fb.usersCollection.doc(state.currentUser.uid).get().then(res 
=> {
            commit('setUserProfile', res.data())
        }).catch(err => {
            console.log(err)
        })
    }
},
mutations: {
    setCurrentUser(state, val) {
        state.currentUser = val
    },
    setUserProfile(state, val) {
        state.userProfile = val
    },
    setUserProfilePic(state, val) {``
        state.userProfilePic = val
    }
}

})

这是在上传图片时触发文件更改的代码：

<script>

const fb = require('../firebaseConfig.js')
import * as firebase from 'firebase'
import { mapState } from 'vuex'

export default {
    data () {
        return {
            imageUrl: null
        }
    },
    methods: {
        onPickProfilePic () {
            this.$refs.fileInput.click();
        },
        filePicked (event) {
            var file = event.target.files[0]
            let filename = file.name
            var user = firebase.auth().currentUser
            var storageRef = firebase.storage().ref(user.uid + 
'/profilePic/' + filename)
            var task = storageRef.put(file)
            var fileReader = new FileReader()
            fileReader.addEventListener('load', () => {
                this.userProfilePic = fileReader.result
            })
            fileReader.readAsDataURL(file)
        }
    },
    computed: {
        ...mapState(['currentUser']),
        userProfilePic: {
            get () {
                return this.$store.state.userProfilePic
            },
            set (val) {
                this.$store.commit('setUserProfilePic', val)
            } 
        }
    }

}

我已经完成了 stackoverflow，但似乎没有任何问题可以解决我的问题。如果您需要其他代码，请告诉我。非常感谢您提供任何帮助或建议。

【问题讨论】：

您是否考虑过保存在本地存储中或在创建的生命周期挂钩中调用 API 以进行每次刷新？？
我试过了，还是不行。也许我做错了什么。我似乎无法让它发挥作用。
问题是：currentUser 也消失了吗？

标签： firebase vue.js firebase-realtime-database firebase-storage vuex

【解决方案1】：

vue 或 vuex 的问题在于，每次重新加载时，所有关联或存储在 vue 状态或 vuex 状态中的数据都会消失。

要在每次重新加载时获取所有这些数据，您必须在生命周期挂钩中调用您尊重的 API。

例如，您想获取用户个人资料。在页面 created 生命周期钩子上调用 API。

created () {
   this.$store.dispatch('fetchUserProfile');
}

这将检索数据并将存储在 vuex 中。因此，您可以在应用程序的任何地方使用它。

【讨论】：