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

时间:2018-09-11 14:57:45

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

寻求帮助

我正在将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,但是似乎没有问题可以解决我的问题。如果您需要其他代码,请告诉我。非常感谢您的任何帮助或建议。

1 个答案:

答案 0 :(得分:0)

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

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

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

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

这将检索数据并将其存储在vuex中。因此,您可以在应用程序中的任何位置使用它。