Изображение профиля Firebase исчезает при перезагрузке страницы - PullRequest
Новая
       8

Изображение профиля Firebase исчезает при перезагрузке страницы

0 голосов
/ 11 сентября 2018

ищет немного помощи

Я использую vue вместе с vuex и 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 голосов
/ 18 сентября 2018

С vue или vuex дело в том, что при каждой перезагрузке все данные, связанные или сохраненные в состоянии vue или состоянии vuex, будут удалены.

Чтобы получать все эти данные при каждой перезагрузке, вам нужно вызвать уважаемый API в хуке жизненного цикла.

Например, вы хотите получить профиль пользователя. На страницах created ловушка жизненного цикла вызывает API. 

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

При этом будут получены данные, которые будут сохранены в vuex. Таким образом, вы можете использовать его в любом месте приложения.

...