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

Question

寻求帮助

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

Answer 1

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

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

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

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

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